React-router5.x使用总结

在 React router 中通常使用的组件有三种：

• 路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
• 路径匹配组件: Route 和 Switch
• 导航组件: Link 和 NavLink

关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRouter>组件。

1、安装：

cnpm i react-router react-router-dom -S

2、使用：

import React, { Component } from 'react' import { BrowserRouter, Route, Link } from 'react-router-dom' import ThisCollapse from '@/components/ThisCollapse' import ThisProgress from '@/components/ThisProgress' import ThisTable from '@/components/ThisTable' export default class App extends Component { render() { return ( <BrowserRouter> <div> <Route path="/" exact component={ThisTable}></Route> <Route path="/a" exact component={ThisCollapse} ></Route> <Route path="/b" exact component={ThisProgress} ></Route> </div> </BrowserRouter> ) } } 

3、路由组件 BrowserRouter 和 HashRouter：

BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。

hash 模式：

import React, { Component } from 'react' import { HashRouter, Route, Link } from 'react-router-dom' import ThisCollapse from '@/components/ThisCollapse' import ThisProgress from '@/components/ThisProgress' import ThisTable from '@/components/ThisTable' export default class App extends Component { render() { return ( <HashRouter> <div> <Route path="/" exact component={ThisTable}></Route> <Route path="/a" exact component={ThisCollapse} ></Route> <Route path="/b" exact component={ThisProgress} ></Route> </div> </HashRouter> ) } } 

通过“http://localhost:8080/#/a” 即可直接访问组件ThisCollapse。

history 模式：

import React, { Component } from 'react' import { BrowserRouter, Route, Link } from 'react-router-dom' import ThisCollapse from '@/components/ThisCollapse' import ThisProgress from '@/components/ThisProgress' import ThisTable from '@/components/ThisTable' export default class App extends Component { render() { return ( <BrowserRouter> <div> <Route path="/" exact component={ThisTable}></Route> <Route path="/a" exact component={ThisCollapse} ></Route> <Route path="/b" exact component={ThisProgress} ></Route> </div> </BrowserRouter> ) } } 

注意：当我们去访问localhost:8081/a这个地址的时候，webpack-dev-server会默认为你要访问服务器上的一个a页面。但我们的项目中只有一个index.html页面，并不存在list页面。所以它会提示你：Cannot GET /a（页面不存在）

在package.json中，我们可以使用webpack-dev-server中的 historyApiFallback 配置来解决此问题：

    devServer: {
        historyApiFallback: true }

这样通过：“http://localhost:8080/a”可以直接访问组件ThisCollapse。

4、路径匹配组件: Route 和 Switch：

Route: 用来控制路径对应显示的组件

有以下几个参数：

4.1 path：指定路由跳转路径

4.2 exact: 精确匹配路由

4.3 component：路由对应的组件

import ThisCollapse from '@/components/ThisCollapse' ... <Route path="/" exact component={ThisTable}></Route>

4.4 render： 通过写render函数返回具体的dom：

<Route path='/about' exact render={() => (<div>about</div>)}></Route>

render 也可以直接返回 About 组件，像下面：

<Route path='/about' exact render={() => <About /> }></Route>

但是，这样写的好处是，不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性：

<Route path='/about' exact render={(props) => { return <About {...props} name={'cedric'} /> }}></Route>

然后，就可在 About 组件中获取 props 和 name 属性：

componentDidMount() {
    console.log(this.props) } // this.props： // history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …} // location: {pathname: "/home", search: "", hash: "", state: undefined, key: "ad7bco"} // match: {path: "/home", url: "/home", isExact: true, params: {…}} // name: "cedric"

render 方法也可用来进行权限认证：

<Route path='/user' exact render={(props) => { // isLogin 从 redux 中拿到, 判断用户是否登录 return isLogin ? <User {...props} name={'cedric'} /> : <div>请先登录</div> }}></Route>

4.5 location: 将 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用

4.6 sensitive：是否区分路由大小写

4.7 strict: 是否配置路由后面的 '/'

Switch

渲染与该地址匹配的第一个子节点 <Route> 或者 <Redirect>。

类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：

            <BrowserRouter>
                <Switch> <Route path="/" exact component={ThisTable}></Route> <Route path="/a" exact component={ThisCollapse} ></Route> <Route path="/a" exact component={ThisProgress} ></Route> </Switch> </BrowserRouter>

此时，“http://localhost:8082/a”只能匹配到组件ThisCollapse。

所以，如果像下面这样:

<Switch> 
    <Route path='/home' component={Home}></Route> <Route path='/login' component={Login}></Route> <Route path='/detail' component={detail}></Route> <Route path='/detail/:id' component={detailId}></Route> <Redirect to="/home" from='/' /> </Switch>

当路由为/detail/1时，只会访问匹配组件detail, 所以需要在detail路由上加上exact:

<Switch> 
    <Route path='/home' component={Home}></Route> <Route path='/login' component={Login}></Route> <Route path='/detail' exact component={detail}></Route> <Route path='/detail/:id' component={detailId}></Route> <Redirect to="/home" from='/' /> </Switch>

 注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。

5. 导航组件: Link 和 NavLink

Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。

Link

两种配置方式：

通过字符串执行跳转路由

<Link to='/login'> <span>登录</span> </Link>

通过对象指定跳转路由

• pathname: 表示要链接到的路径的字符串。
• search: 表示查询参数的字符串形式。
• hash: 放入网址的 hash，例如 #a-hash。
• state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源

<Link to={{
        pathname: '/login', search: '?name=cedric', hash: '#someHash', state: { fromWechat: true } }}> <span>登录</span> </Link>

点击链接 进入 Login 页面后，就可以在this.props.location.state中看到 fromWechat: true:

NavLink

可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

<Link to='/login' activeClassName="selected"> <span>登录</span> </Link>

<NavLink
  to="/login" activeStyle={{ fontWeight: 'bold', color: 'red' }} > <span>登录</span> </NavLink>

• exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。
• strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。
• location 接收一个location对象，当url满足这个对象的条件才会跳转
• isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败

const oddEvent = (match, location) => { if (!match) { return false } const eventID = parseInt(match.params.eventID) return !isNaN(eventID) && eventID % 2 === 1 } <NavLink to="/login" isActive={oddEvent} >login</NavLink>

6. Redirect

<Redirect> 将导航到一个新的地址。即重定向。

<Switch> 
    <Route path='/home' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Redirect to="/home" from='/' exact /> </Switch>

上面，当访问路由‘/’时，会直接重定向到‘/home’。

<Redirect> 常在用户是否登录：

class Center extends PureComponent { render() { const { loginStatus } = this.props; if (loginStatus) { return ( <div>个人中心</div> ) } else { return <Redirect to='/login' /> } } }

也可使用对象形式：

<Redirect
  to={{
    pathname: "/login", search: "?utm=your+face", state: { referrer: currentLocation } }} />

 7. withRouter

withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。

import { withRouter } from 'react-router-dom'; class Detail extends Component { render() { ··· ··· } } const mapStateToProps = (state) => { return { ··· ··· } } const mapDispatchToProps = (dispatch) => { return { ··· ··· } } export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

8. 编程式导航 - history 对象

例如，点击img进入登录页：

class Home extends PureComponent { goHome = () => { console.log(this.props); this.props.history.push({ pathname: '/login', state: { identityId: 1 } }) } render() { return ( <img className='banner-img' alt='' src="img.png" onClick={this.goHome} /> ) } }

 history 对象通常会具有以下属性和方法：

• length - (number 类型) history 堆栈的条目数
• action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
• location - (object 类型) 当前的位置。location 会具有以下属性：
• pathname - (string 类型) URL 路径
• search - (string 类型) URL 中的查询字符串
• hash - (string 类型) URL 的哈希片段
• state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。
• push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
• replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目
• go(n) - (function 类型) 将 history 堆栈中的指针调整 n
• goBack() - (function 类型) 等同于 go(-1)
• goForward() - (function 类型) 等同于 go(1)
• block(prompt) - (function 类型) 阻止跳转。 

注意，只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象

所以，如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹:

import React, { PureComponent } from 'react'; import { withRouter } from 'react-router-dom'; class 子组件 extends PureComponent { goHome = () => { this.props.history.push('/home') } render() { console.log(this.props) return ( <div onClick={this.goHome}>子组件</div> ) } } export default withRouter(子组件);

9. 路由过渡动画

import { TransitionGroup, CSSTransition } from "react-transition-group"; class App extends Component { render() { return ( <Provider store={store}> <Fragment> <BrowserRouter> <div> <Header /> {/* 最外部的<Route></Route>不进行任何路由匹配，仅仅是用来传递 location */} <Route render={({location}) => { console.log(location); return ( <TransitionGroup> <CSSTransition key={location.key} classNames='fade' timeout={300} > <Switch> <Redirect exact from='/' to='/home' /> <Route path='/home' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Route path='/write' exact component={Write}></Route> <Route path='/detail/:id' exact component={Detail}></Route> <Route render={() => <div>Not Found</div>} /> </Switch> </CSSTransition> </TransitionGroup> ) }}> </Route> </div> </BrowserRouter> </Fragment> </Provider> ) } }

.fade-enter { opacity: 0; z-index: 1; } .fade-enter.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in; }

10. 打包部署的路由配置

项目执行npm run build后，将打包后的build文件当大 Nginx 配置中。

如果 react-router 路由 使用了 history 模式（即<BrowserRouter>），那么在 Nginx 配置中必须加上:

location / {
        ··· ···
        try_files $uri /index.html;
        ··· ···
        }
    }

如果 react-router 路由 使用了 hash 模式(即<HashRouter>)，那么在 Nginx 中不需要上面的配置。