无废话快速上手React路由

嵌套路由跳转

React 的路由匹配层级是有顺序的

例如，在 App 组件中，设置了两个路由组件的匹配路径，分别是 /home 和 /about，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  Link,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {

  return (
    <div className="App">
      <Router>
        <Link to="/home">跳转Home页面</Link>
        <Link to="/about">跳转About页面</Link>

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

      </Router>
    </div>
  );
}

export default App;

然后 Home 组件中同样也想设置两个路由组件的匹配路径，分别是 /home/one 和 /home/two，此时就可以看出，这个 /home/one 和 /home/two 为上一级路由 /home 的二级嵌套路由，代码如下：

import React from 'react'
import {
    Route,
    Link,
} from 'react-router-dom'
import One from './one'
import Two from './two'

function Home () {

    return (
        <>
            我是Home页面
            <Link to="/home/one">跳转到Home/one页面</Link>
            <Link to="/home/two">跳转到Home/two页面</Link>

            <Route path="/home/one" component={One}/>
            <Route path="/home/two" component={Two}/>
        </>
    )
}

export default Home

特别注意： Home 组件中的路由组件 One 的二级路由路径匹配必须要写 /home/one ，而不是 /one ，不要以为 One 组件看似在 Home 组件内就可以简写成 /one

重定向

当页面跳转时，若跳转链接没有匹配上任何一个 Route 组件，那么就会显示 404 页面，所以我们需要一个重定向组件 Redirect ，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <NavLink to="/shop" className="link">跳转Shop页面</NavLink>   {/* 点击，跳转到/shop，但该路径没有设置 */}

        <Switch>
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>      
          <Redirect to="/home" />    {/* 当以上Route组件都匹配失败时，重定向到/home */}                    
        </Switch>

      </Router>
    </div>
  );
}

export default App;

路由传参

所有路由传递的参数，都会在跳转路由组件的 props 中获取到，每种传参方式接收的方式略有不同

路由传参的方式一共有三种，依次来看一下

第一种

第一种是在 Link 组件的跳转路径上携带参数，并在 Route 组件的匹配路径上通过 :参数名 的方式接收参数，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在 /home 的路径上携带了 张三、18 共两个参数 */}
        <NavLink to="/home/张三/18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 在 /home 匹配路径上相同的位置接收了 name、age 两个参数 */}
          <Route path="/home/:name/:age" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

第二种

第二种方式就是通过在 Link 组件的跳转链接后面跟上以 ? 开头，类似 ?a=1&b=3 这样的参数进行传递，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在跳转路径后面以?开头传递两个参数，分别为name=张三、age=18 */}
        <NavLink to="/home?name=张三&age=18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需做接收操作 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

第三种

第三种方式就是以对象的形式编写 Link 组件的 to 跳转属性，并通过 state 属性来传递参数，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 以对象的形式描述to属性，路径属性名为pathname，参数属性名为state */}
        <NavLink to={{pathname: "/home", state: {name: '张三', age: 18}}} className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需特地接收属性 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

函数式路由

以上主要都是通过 react-router-dom 中的 Link 组件来往某个路由组件跳转

但有时，我们需要更灵活的方式进行跳转路由，例如通过调用一个函数，随时随地进行路由跳转，这就叫函数式路由

函数式路由用到的方法有以下 5 个

push

push 方法就是使页面跳转到对应路径，并在浏览器中留下记录（即可以通过浏览器的回退按钮，返回上一个页面）

举个例子：在路由组件 Home 中设置一个按钮 button ，点击后调用 push 方法，跳转到 /about 页面

import React from 'react'

function Home (props) {

    let pushLink = () => {
        props.history.push('/about')
    }

    return (
        <div className="a">
            我是Home页面
            <button onClick={pushLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

replace

replace 方法与 push 方法类似，不一样的地方就是，跳转后不会在浏览器中保存上一个页面的记录（即无法通过浏览器的回退按钮，返回上一个页面）

改动一下代码

import React from 'react'

function Home (props) {

    let replaceLink = () => {
        props.history.replace('/about')
    }

    return (
        <div className="a">
            我是Home页面
            <button onClick={replaceLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

goForward

调用 goForward 方法，就相当于点击了浏览器的返回下一个页面按钮：