React页面路由

react

React页面路由

前言:

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是单页Web应用(Single Page Web Application,SPA))的兴起,前端路由系统随之开始流行。

1、从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下):

记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态);

可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态);

2、作为开发者,要实现这两个功能,我们需要做到:

改变url且不让浏览器向服务器发出请求;

监测 url 的变化;

截获 url 地址,并解析出需要的信息来匹配路由规则。

我们路由常用的hash模式和history模式实际上就是实现了上面的功能。

一、hash模式

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件,浏览器的进后退也能对其进行控制,所以人们在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的。

   使用到的api:

window.location.hash = 'qq' // 设置 url 的 hash,会在当前url后加上 '#qq'

var hash = window.location.hash // '#qq'

window.addEventListener('hashchange', function(){

    // 监听hash变化,点击浏览器的前进后退会触发

})

二、history模式

已经有 hash 模式了,而且 hash 能兼容到IE8, history 只能兼容到 IE10,为什么还要搞个 history 呢?
      首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。

其次,hash 的传参是基于 url的,如果要传递复杂的数据,会有体积的限制,而history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。

相关API:
   window.history.pushState(state, title, url)

// state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取

// title:标题,基本没用,一般传 null

// url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径。

例如: 

当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,

执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/

window.history.replaceState(state, title, url)

// 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录

window.addEventListener("popstate", function() {

    // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发

});

window.history.back() // 后退

window.history.forward() // 前进

window.history.go(1) // 前进一步,-2为后退两步,window.history.length可以查看当前历史堆栈中页面的数量

三、react-router-dom API

  React实现页面路由的模块:react-router-dom

   1、HashRouter和BrowserRouter

     其实就是路由的hash和history两种模式,并且这两个组件是路由的容器,必须在最外层

     // hash模式

ReactDOM.render(

 <HashRouter>

       <Route path="/" component={Home}/>

</HashRouter>

)

// history模式

ReactDOM.render(

   <BrowserRouter>

        <Route path="/" component={Home} />

      </BrowserRouter>

)

   2、Route

          路由的一个原材料,它是控制路径对应显示的组件

      Route的参数

path:跳转的路径

component: 对应路径显示的组件

render:可以自己写render函数返回具体的dom,而不需要去设置component

location: 传递route对象,和当前的route对象对比,如果匹配则跳转

exact: 匹配规则,true的时候则精确匹配。

3、Router

       低级路由,适用于任何路由组件,主要和redux深度集成,使用必须配合history对象,使用Router路由的目的是和状态管理库如redux中的history同步对接

<Router history={history}>

    ...

</Router>

4、Link和NavLink

        两者都是跳转路由,NavLink的参数更多些

       (1)Link的api

l to: 有两种写法,表示跳转到哪个路由

  • 字符串写法

      <Link to="/a"   />

  • 对象写法

    <Link to={{

  pathname: '/courses',

  search: '?sort=name',

  hash: '#the-hash',

  state: { fromDashboard: true }

}}/>

l replace:就是将push改成replace

l innerRef:访问Link标签的dom

        

(2)NavLink的api

l Link的所有api

l activeClassName 路由激活的时候设置的类名

l activeStyle 路由激活设置的样式

l exact  参考Route,符合这个条件才会激活active类

l strict  参考Route,符合这个条件才会激活active类

l isActive 接收一个回调函数,active状态变化的时候回触发,返回false则中断跳转

const oddEvent = (match, location) => {

  console.log(match,location)

  if (!match) {

    return false

  }

  console.log(match.id)

  return true

}

<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>

l location 接收一个location对象,当url满足这个对象的条件才会跳转

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>

   5、Redirect:页面重定向

// 基本的重定向

<Redirect to="/somewhere/else" />

// 对象形式

<Redirect

  to={{

    pathname: "/login",

    search: "?utm=your+face",

    state: { referrer: currentLocation }

  }}

/>

// 采用push生成新的记录

<Redirect push to="/somewhere/else" />

// 配合Switch组件使用,form表示重定向之前的路径,如果匹配则重定向,不匹配则不重定向

<Switch>

  <Redirect from='/old-path' to='/new-path'/>

  <Route path='/new-path' component={Place}/>

</Switch>

 6、Switch

路由切换,只会匹配第一个路由,可以想象成tab栏
Switch内部只能包含Route、Redirect、Router

  <Switch>

  <Route exact path="/" component={Home}/>

  <Route path="/about" component={About}/>

  <Route path="/:user" component={User}/>

  <Route component={NoMatch}/>

</Switch>

7、withRouter

当一个非路由组件也想访问到当前路由的match,location,history对象,那么withRouter将是一个非常好的选择,可以理解为将一个组件包裹成路由组件

import { withRouter } from 'react-router-dom'

const MyComponent = (props) => {

    const { match, location, history } = this.props

     return (

        <div>{props.location.pathname}</div>

    )

}

const FirstTest = withRouter(MyComponent);

  8、Router Hooks

      在Router5.x中新增加了Router Hooks用于在函数组件中获取路由信息。使用规则和React的其他Hooks一致。

(1)useHistory:返回history对象

(2)useLocation:返回location对象

(3)useRouteMatch:返回match对象

(4)useParams:返回match对象中的params,也就是path传递的参数

   import React from ‘react’;

    import { useHistory } from ‘react-router-dom’;

 function backBtn(props) {

        let  history = useHistory;

        return <button onClick={ ()=> {

              history.goBack();

}>返回上一页</button>

       }

9、history对象

   在每个路由组件中我们可以使用this.props.history获取到history对象,也可以使用withRouter包裹组件获取,

在history中封装了push,replace,go等方法,具体内容如下:

History {

    length: number;

    action: Action;

    location: Location;

    push(path: Path, state?: LocationState): void; // 调用push前进到一个地址,可以接受一个state对象,就是自定义的路由数据

    push(location: LocationDescriptorObject): void; // 接受一个location的描述对象

    replace(path: Path, state?: LocationState): void; // 用页面替换当前的路径,不可再goBack

    replace(location: LocationDescriptorObject): void; // 同上

    go(n: number): void; // 往前走多少也页面

    goBack(): void; // 返回一个页面

    goForward(): void; // 前进一个页面

    block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;

    listen(listener: LocationListener): UnregisterCallback;

    createHref(location: LocationDescriptorObject): Href;

}

这样我们想使用api来操作前进后退就可以调用history中的方法

 10、404视图

既然路由就需要考虑一个问题---404视图。当用户访问一些不存在的URL时就该返回404视图了,但不存在的地址该如何匹配呢?----使用Switch

Switch组件的作用类似于JS中的switch语句,当一项匹配成功之后,就不再匹配后续内容。这样的话就可以把要匹配的内容写在Switch组件中,最后一项写404视图,当其他都匹配不成功时就是404视图。例如:

<Switch>
  <Route exact={true} path={"/"} component={Home}/>
  <Route path={"/about"} component={About}/>
  <Route path={"/topics"} component={Topics}/>
  <Route component={View404}/>
</Switch>

 

 

 

四、react-router-dom实现路由

   1、基本路由示例:

 

(1)Home.js

import React, { Component } from "react";
class Home extends Component {
    render() {
        return (
            <div>
                <h2>Home页面</h2>
            </div>
        )
    }
}

export default Home;

 (2)About.js

import React, { Component } from "react";
class About extends Component {
    render() {
        return (
            <div>
                <h2>About页面</h2>
            </div>
        )
    }
}

export default About;

 (3)Topic.js

import React,{ Component } from "react";
class Topic extends Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <h2>{ this.props.match.params.topicId}</h2>
            </div>
        )
    }
}
export default Topic;

   (4)Topics.js

import React,{ Component } from "react";
import {
    Route,
    Link
} from "react-router-dom";
import Topic from "./Topic";

class Topics extends Component{
    render() {
        console.log(this)
        return (
            <div>
                <h2>Topics</h2>
                <ul>
                    <li>
                        <Link to={`${ this.props.match.url }/rendering`}>
                            Rendering with React
                        </Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/components`}>
                            Components
                        </Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/props-v-state`}>
                            Props v. State
                        </Link>
                    </li>
                </ul>
                <Route path={`${this.props.match.url}/:topicId`} component={Topic}/>
                <Route exact path={this.props.match.url} render={()=> (
                      <h3> Please select a topic.</h3>
                    )}/>
            </div>
        )
    }
}
export default Topics;

            (5)App.js

import logo from './logo.svg';
import './App.css';
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";
import Topics from "./components/Topics";
import Home from "./components/Home";
import About from "./components/About";
function App() {
  return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to={"/"}>Home</Link>
            </li>
            <li>
              <Link to={"/about"}>About</Link>
            </li>
            <li>
              <Link to={"/topics"}>Topics</Link>
            </li>
          </ul>
          <hr/>
          <Route exact={true} path={"/"} component={Home}/>
          <Route path={"/about"} component={About}/>
          <Route path={"/topics"} component={Topics}/>
        </div>
      </Router>
  )
}
export default App;

2、嵌套路由示例

     (1)运行结果

 

   (2)目录结构

           

   (3)Header.js

import React,{ Component } from "react";
import { NavLink } from "react-router-dom";
import '../css/header.css';

class Header extends Component {
    render() {
        return (
            <header>
                <nav>
                    <ul>
                        <li>
                            <NavLink exact to={"/"}>首页</NavLink>
                        </li>
                        <li>
                            <NavLink to={"/news"}>新闻</NavLink>
                        </li>
                        <li>
                            <NavLink to={"/course"}>课程</NavLink>
                        </li>
                        <li>
                            <NavLink to={"/joinUs"}>加入我们</NavLink>
                        </li>
                    </ul>
                </nav>
            </header>
        )
    }
}
export default Header;

     (4)header.css

body{
    font-size: 16px;
    margin: 0;
    padding: 0;
}

ul{
    text-align: right;
    background-color: #eee;
    margin: 0;
}
ul li{
    display: inline-block;
    list-style: none;
    text-align: center;
    border-left: 1px solid #ccc;
}

a {
    text-decoration: none;
    color: #666;
    font-size: 1.5rem;
    padding: 0.8em 2em;
    display: block;
}
a:hover{
    color: #000;
}
a.active {
    background-color: #666;
    color: #fff;
}

 

(5)Home.js

import React,{ Component } from "react";
import Header from "../components/Header";
import '../css/home.css';
import logo from '../images/react.png';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }

    add = ()=> {
        this.setState((preState)=>{
            return{
                count: preState.count+1
            }
        })
    }
    sub = ()=> {
        this.setState((preState)=> {
            return{
                count: preState.count-1
            }
        })
    }
    async asyncAdd() {
        await setTimeout(()=> {
            this.setState((preState)=> {
                return{
                    count: preState.count+1
                }
            })
        },1000);
    }

    render() {
        return(
            <div className={"home"}>
                <Header/>
                <div>
                    <img className="logo" src={logo} alt={"logo"}/>
                </div>
                <h1>Count的值:{ this.state.count }</h1>
                <div className="flexContainer">
                    <button onClick={ ()=> this.asyncAdd() }>等待1s再执行count+1</button>
                    <button onClick={ this.add }>count+1</button>
                    <button onClick={ ()=> this.sub() }>count-1</button>
                </div>
            </div>
        )
    }
}
export default Home;

 

(6)home.css

@keyframes rotate {
    0% {
        transform: rotate(0deg); left: 0px;
    }
    100% {
        transform: rotate(360deg); left: 0px;
    }
}
.home{
    text-align: center;
}
.logo{
    animation: rotate 10s linear 0s infinite;
}
button{
    background: #237889;
    font-size: calc(1.5*1rem);
    color: #fff;
    padding: 0.3em 1em;
    border-radius: 1em;
    margin: 1em;
}

 

(7)NewDetail.js

import React,{ Component } from "react";
import Header from "../components/Header";

class NewDetail extends Component{
    constructor(props) {
        super(props);
        console.log(props)
        this.data = props.location.state? props.location.state.data:null;
    }

    render() {
        if (this.data !=null){
            let title = this.data.title;
            let content = this.data.content;
            return (
                <div>
                    <Header />
                    <h1>{ title }</h1>
                    <p> { content }</p>
                </div>
            )
        }
    }
}
export default NewDetail;

 

  (8)News.js

import React,{ Component } from "react";
import {
    Route,
    NavLink
} from "react-router-dom";

import Header from "../components/Header";
import NewDetail from "./NewDetail";

const data = [
    {
        id: 1001,
        title: '西安新增6例新冠病例',
        content: '上海-西安-张掖-额济纳-西安'
    },
    {
        id: 1002,
        title: '寒潮来袭,你...冻成狗了吗?',
        content: '被子是我的亲人,我不想离开它'
    }
]
class  NewsPage extends Component{
    render() {
        return(
            <div>
                <Header />
                <h1>请选择一条新闻:</h1>
                {
                    data.map((item)=>{
                     return(
                         <div key={item.id}>
                            <NavLink to={{
                                pathname: `${this.props.match.url}/${item.id}`,
                                state: { data: item }
                            }}>
                                { item.title}
                            </NavLink>
                        </div>
                     )
                    })
                }
            </div>
        )
    }
}

const News = ({ match })=> {
    return(
        <div>
            <Route exact path={match.path} render={(props)=><NewsPage {...props}/>}/>
            <Route path={`${match.path}/:id`} component={NewDetail} />
        </div>
    )
}

export default News;

  (9)Course.js

import React,{ Component } from "react";
import Header from "../components/Header";
import { NavLink } from "react-router-dom";

class Course extends Component{
    render() {
        let { match } = this.props;
        console.log(this.props)
        return(
            <div>
                <Header />
                <p>
                    <NavLink to={`${match.url}/front-end`}>前端技术</NavLink>
                </p>
                <p>
                    <NavLink to={`${match.url}/big-data`}>大数据</NavLink>
                </p>
                <p>
                    <NavLink to={`${match.url}/algorithm`}>算法</NavLink>
                </p>
            </div>
        )
    }
}
export default Course;

(10)App.js

import './App.css';
import {
  BrowserRouter as Router,
    Route,
    Switch,
} from "react-router-dom";
import Home from "./pages/Home";
import Course from "./pages/Course";
import News from './pages/News';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path={"/"} component={ Home }/>
        <Route path={"/course"} component={Course}/>
        <Route path={"/news"} component={News}/>
      </Switch>
    </Router>
  );
}
export default App;

 

 

 

五、关于路由的面试题:

   1、实现前端路由的两种方式及其差异?

前端路由的本质是监听url变化,然后匹配路由规则,无需刷新就可以显示相应的页面,目前单页面路由主要有两种方式

(1) hash 模式

(2) history 模式

   2、hash模式实现路由

      为什么要使用hash模式:页面使用Ajax发送异步请求可以实现无缝刷新,但这种方式也存在使得浏览器的url不发生任何变化的时候就完成了请求,使得用户体验不佳,也导致了用户下次使用相同的url访问上次的页面时内容无法重新呈现的问题。hash模式是解决这个问题的途径之一。

     主要通过location.hash设置hash Url,也就是url的符号#后面的值。当哈希值发生变化时,不会向服务器请求发送数据,可以通过hashchange事件来监听hash的变化,实现相应的功能

(1) ocation.hash 设置/获取hash

(2) hashchange事件监听url变化,解析url实现页面路由跳转

 

hash模式需要注意的几个点

  • 散列值不会随请求发送到服务器
  • 散列值会反映在浏览器url上

  • 只修改浏览器的哈希部分,按下回车,浏览器不会发送任何请求给服务器,只会触发hashchange事件并且修改location.hash的值

  • html a标签,设置id锚点,点击触发时,浏览器会自动设置location.hash值,同时触发hashchange事件,url上也会反映这一变化
  • hash模式下,手动刷新页面不会向浏览器发送请求,不会触发hashchange事件,但是会触发load事件

  示例1:location.hash触发hashchange事件

 

   效果:

 

示例2:锚点跳转设置hash触发hashchange事件

关于锚点跳转:

  • a标签可以跳转到指定了name或者id的a标签
  • a标签可以跳转到指定了id的非a标签,非a标签如果没有指定id则不可以被跳转

 

 

3、history模式实现路由

主要通过history.pushState/replceState向当前历史记录中插入状态对象state,在浏览器前进、回退、跳转等动作发生时触发popState事件,此时可以通过解析popState事件回调函数的event参数中的state对象,或者解析当前页面url来实现路由。
     建议解析url方式实现路由。如果没有在页面首次加载的时候设置pushState/replaceState,那么首页一般是没有state对象的,在执行浏览器动作时,如果回退到首页,那么当前history对象的state属性不存在,导致解析state报错

 

示例:

 

 

两种路由方式的差异以及需要注意的点

     (1)方式的异同

  • 页面手动刷新,hash模式不会向服务器发送请求,history模式会

  • hash模式下url中的哈希值不会发送到服务器,history模式url全部会发送至服务器
  • 设置location.hash和pushState都不会导致浏览器刷新

  • 设置location.hash的时候会触发hashchange事件和popstate事件

  • 仅当pushState函数设置url参数的值为hash格式时,浏览器动作发生会触发hashchange事件,尽管location.hash值为空

  • a标签锚点跳转可以设置hash,触发hashchange事件

      (2)注意的问题

         如果pushState的url为跨域网址,那么会报错.这样设计的目的是防止恶意代码让用户以为他们是在另一个网站上

 

以上是 React页面路由 的全部内容, 来源链接: utcz.com/z/383561.html

回到顶部