[JavaScript知识库]react路由

第一部分：路由基本使用

基本步骤

安装

yarn add react-router-dom

react-router-dom这个包提供了三个核心的组件

import { HashRouter, Route, Link } from 'react-router-dom'

使用HashRouter包裹整个应用，一个项目中只会有一个Router

<Router>
    <div className="App">
    // … 省略页面内容
    </div>
</Router>

使用Link指定导航链接

<Link to="/Comment">页面一</Link>&nbsp;&emsp;
<Link to="/Search">页面2</Link>

?使用Route指定路由规则

{/* 想要精确匹配 exact */}
<Route exact path="/Comment" component={Comment}></Route>
<Route path="/Search" component={Search}></Route>

如果不是精确匹配：如果路由是/Comment
则能匹配到/Comment和/Comment2

完全代码

import Comment from "./components4/Comment";
import Search from "./components4/Search";

import React from "react";
import {Route,HashRouter,Link,NavLink,Switch} from "react-router-dom";
class App extends React.Component {
  render(){
    return (
      <HashRouter>
        <Link to="/Comment">页面一</Link>&nbsp;&emsp;
        <Link to="/Search">页面2</Link>
        {/* 想要精确匹配 exact */}
        <Route exact path="/Comment" component={Comment}></Route>
        <Route path="/Search" component={Search}></Route>
      </HashRouter>
    )
  }
}

Switch与404

• 通常，我们会把Route包裹在一个Switch组件中

• 在Switch组件中，不管有多少个路由规则匹配到了，都只会渲染第一个匹配的组件

• 通过Switch组件非常容易的就能实现404错误页面的提示

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/user" component={User}/>
  //不指定path匹配不成功则匹配404
  <Route component={NoMatch}/>
</Switch>

第二部分：嵌套路由的配置

• 在React中，配置嵌套路由非常的简单，因为Route就是一个组件，可以在任意想配置的地方进行配置

• 但是配置嵌套路由的时候，需要对路径进行处理，必须要先匹配到父级路由，才能匹配到子路由

?在一级路由中如下配置

我想进入/Search的二级路由 这是一级路由配置
import Comment from "./components4/Comment";
import Search from "./components4/Search";
import "./components4/style/index.scss";
import React from "react";
import {Route,HashRouter,Link,NavLink,Switch} from "react-router-dom";
class App extends React.Component {
  render(){
    return (
      <HashRouter>
        <Link to="/Comment">页面一</Link>&nbsp;&emsp;
        <Link to="/Search">页面2</Link>
        <Switch> {/*Switch:只要有一个匹配成功*/}
          {/* 想要精确匹配 exact */}
          <Route exact path="/Comment" component={Comment}></Route>
          <Route path="/Search" component={Search}></Route>
        </Switch>
      </HashRouter>
    )
  }
}

在二级路由中配置

import React from "react";
import Child from "./Child.js";
import {Route,Link} from "react-router-dom";
class Search extends React.Component {
    render(){
       return (
           <div>
               Search
               <Link to="/Search/Child">点我进入我的二级路由</Link>
               <Route path="/Search/Child" component={Child}></Route>
           </div>
       )
   }
}

export default Search

下面是Child.js

import React from "react";
class Child extends React.Component {
   render(){
       return (
           <div>
               Child
           </div>
       )
   }
}
export default Child

第三部分：编程式导航

• 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？

• 编程式导航：通过 JS 代码来实现页面跳转

• history 是 React 路由提供的，用于获取浏览器历史记录的相关信息

• push(path)：跳转到某个页面，参数 path 表示要跳转的路径

• go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

class Login extends Component {
    handleLogin = () => {
        // ...
        this.props.history.push('/home')
    }
    render() {...省略其他代码}

动态路由与路由参数获取

可以使用:id的方式来配置动态的路由参数

// 可以匹配 /users/1  /users/2  /users/xxx
<Route path="/users/:id" component={Users} />

在组件中，通过props可以接收到路由的参数

render(){
    console.log(this.props.match.params)
}