初识react-router

环境介绍

当前使用的版本为：

"react-router-dom": "^4.3.1"

react-router 与 react-router-dom

可以认为react-router 为 react-router-dom 的子集
比如以下写法：

import { HashHistory, Switch, Route, Router, Link } from 'react-router-dom'
// 等价于
import { Switch, Route, Router } from 'react-router'
import { HashHistory, Link } from 'react-router-dom'

react-router 实现了路由的核心功能。 react-router-dom 是基于react-router，加入了浏览器操作的一些功能。所以只需要下载依赖react-router-dom就可以了。以下是记录react-router-dom的简单使用。

Link 与 NavLink

Link 的用法

import { Link } from 'react-router-dom'
<Link to='/about'></Link>

<Link 
    to={{
        pathname:'/about',
        search: "?sort=name",
        hash: "#the-hash",
        state: { fromDashboard: true }
    }} />
    
<Link to='/about' replace />
//用过vue的，对这个比较清楚，添加这个不会把该路由添加到访问的历史记录里。

pathname: （string）路由名称。
search：（string）查询参数的字符串表示形式。
hash：添加hash值到url里，可对应路由。
state: 在路由里添加含有状态的变量，根据变量，来对路由做相应的处理。

NavLink

<Link /> 组件里的特殊组件。当前url匹配时，为该元素添加样式属性。比如table切换的时候，选中的一栏字体高亮等。

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

<NavLink to="/about">About</NavLink> // 一般用法

<NavLink to="/about" activeClassName="selected">About</NavLink>  // 添加激活的时的class

<NavLink
  to="/about"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  About
</NavLink>  
// 可以直接添加样式

Redirect

重定向重新加载页面。

import { Route, Redirect } from 'react-router'

// 如果未登录，重定向登录界面
<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/loggedIn" />
  ) : (
    <HomePage/>
  )
)}/>

// to: string
<Redirect to="/list/id" />

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

// from: string
<Redirect from='/old-path' to='/new-path'/>
<Redirect from='/users/:id' to='/users/profile/:id'/>

这边简单实现比较常用的table切换，用到的重定向的问题。下面实现当从一个页面跳转到一个table切换的页面，默认重定向已通过的模块（也可以定向到其他页面，根据自己需求，设置type值。这里需要注意的一点是，如果当前页面是首页的话，就不能使用this.props.match.path, 因为路由match对象还不存在，如果想在首页实现的话，就不要加this.props.match.path）。

import React from 'react';
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
class App extends React.Component {
    render(){
        return(
            <div>
                <NavLink to={`${this.props.match.path}/passed`} className="nav-link">已通过</NavLink>
                <NavLink to={`${this.props.match.path}/audited`} className="nav-link">待审核</NavLink>
                <NavLink to={`${this.props.match.path}/failed`} className="nav-link">未通过</NavLink>
                <!--子路由在父级配置-->
                <Switch>
                  <Route path={`${this.props.match.path}/:type`} component={Content} />
                  <Redirect from={`${this.props.match.path}`} to={`${this.props.match.path}/passed`} exact component={Content} />
                </Switch>
            </div>
        )
    }
}

Route

是最基本的组件，当url匹配时，渲染对应的组件。

import { Router, Route } from 'react-router-dom';
<Router>
    <Route exact path="/" component={Home} /> 
</Router>

// 获取传递的参数
<Route path="/user/:username" component={User} />;

function User({ match }) {
  return <h1>Hello {match.params.username}!</h1>;
}

// 或者可以这样
class User extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return  <h1>Hello { this.props.match.params.username}!</h1>;
    }
}

这边还有route 路由渲染函数式表达，来处理过度动画，点击这里

Router

路由器的初级出口
常用的几种方式

import { BrowserRouter as Router } from 'react-router';

import { HashRouter as Router } from 'react-router';

import { Router  } from 'react-router';
import createBrowserHistory from "history/createBrowserHistory";

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

Switch

常用来包裹<Route /> 和<Redirect /> 组件；

withRouter

顾名思义，是来关联路由。下面有使用到，也可以和react-redux一起使用，这里只介绍react-router部分。

react-router-dom 的简单的使用

这里我们实现两个路由跳转的案例来介绍路由的使用

• 比较常见的页面之间的跳转

image

我们先实现基本的骨架

<!--// app.js-->
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class App extends Component { 
    nextPage = () => {
        this.props.history.push('/test')
    }
    render(){
        return (
            <div>
                <ul>
                    <li><NavLink to='/about'> About </NavLink></li>
                    <li><NavLink to='/inbox'> Inbox </NavLink></li>
                </ul>
                <div onClick={ this.nextPage }>测试<div>
            </div>
        )
    }
}
// about.js
import React from 'react'
const About = () => {
    return <h2>About</h2>
}
export default About;

//inbox.js
import React from 'react'
const Inbox = () => {
    return <h2>Inbox</h2>
}
export default Inbox;
// test.js
import React from 'react'
const Test = () => {
    return <h2>这是个测试</h2>
}
export default Test;

// router.js
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import App from './App'
import About from './about' 
import Inbox from './Inbox'
import Test from './test'

class Routes extends React.Component {
  render(){
    return (
      <BrowserRouter>
        <Switch>
            <Route path='/' exact component={App}/> // exact 是精确匹配，如果没有这个，会匹配所有带有/的路由
            <Route path='/about' component={About}/>
            <Route path='/inbox' component={Inbox}/>
            <Route path='/test' exact component={Test}/>
        </Switch>
      </BrowserRouter>
    )
  }
}
export default Routes;
// index.js 
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router'
ReactDOM.render(<Routes />, document.getElementById('root'));

• 这里render函数return的对象，必须要有一个跟标签，来包裹内容。如果不想要根标签，react还提供了<Fragment />组件来包裹内容。这里需要注意的是，还是需要提供的<Fragment /> 包裹内容，并且需要引入(和Component一样)。

• 实现页面内的内容切换

  
  image

这里我们只需要对两个文件改动就可以了。一个是App.js, 一个是router.js。其他页面我们不动。

// App.js 修改为：
class App extends Component { 
    nextPage = () => {
        this.props.history.push('/test')
    }
    render(){
        return (
            <div>
                <ul>
                    <li><NavLink to='/about'> About </NavLink></li>
                    <li><NavLink to='/inbox'> Inbox </NavLink></li>
                </ul>
                <div onClick={ this.nextPage }>测试<div>
                { this.props.children }
            </div>
        )
    }
}
// router.js修改为：
class Routes extends React.Component {
  render(){
    return (
      <BrowserRouter>
        <Switch>
          <App>
            <Route path='/about' component={About}/>
            <Route path='/inbox' component={Inbox}/>
          </App>
          <Route path='/test' exact component={Test}/>
        </Switch>
      </BrowserRouter>
    )
  }
}

这里我们基本就是实现了页面内组件内容的切换了，但是此时出现了一个问题，当我点击‘测试’ 的时候，页面报错了。报错内容为“ TypeError: Cannot read property 'push' of undefined ” ，可以看出路由并没有匹配到，得到的是一个undefind。因为该组件没有关联到路由，这里需要（react-router-dom中的withRouter组件）关联下。

import React, { Component } from 'react'
import { NavLink, withRouter } from 'react-router-dom'

class App extends Component {
  nextPage = () => {
    this.props.history.push('/test');
  }
  render() {
    return (
      <div>
        <ul>
          <li><NavLink to="/about"> About </NavLink> </li>
          <li><NavLink to="/inbox"> Inbox </NavLink></li>
        </ul>
        <div onClick={this.nextPage} >测试</div>
        { this.props.children }
      </div>
    );
  }
}
export default withRouter(App);

但是还是没有跳转，额...

这边看下路由，尝试调整路由的位置

class Routes extends React.Component {
  render(){
    return (
      <BrowserRouter>
        <Switch>
          <Route path='/test' exact component={Test}/>
          <App>
            <Route path='/about' component={About}/>
            <Route path='/inbox' component={Inbox}/>
          </App>
        </Switch>
      </BrowserRouter>
    )
  }
}

嗯，搞定。在当前页面切换不同组件内容，并实现页面间的路由跳转。

这里只是简单的使用react-router实现两种跳转方式，使用js控制路由的跳转，以及不同组件的使用，这里还有BrowserRouter 、HashRouter、StaticRouter、location、match、matchPath等。react-router还有很多强大的功能，这里只是用了基础的，后续会慢慢记录学习react以及相关插件。

具体参考官方文档， 因为网上有很多不同版本的介绍，感觉很乱，还是应该先查阅官方文档，如果不明白的地方，在具体查阅网上介绍，注意版本的区别。

如有不正确的地方，还请大佬斧正。