react 路由

下载react-router-dom
路由：不同的路由

npm i react-router-dom --save

App.js文件中引入路由相关的模块

import React from 'react';
/**HashRouter规定路由的形式：路由是#/的形式
http://localhost:3000/#/main/home**/
import { HashRouter as Router, Link, Route, Redirect,Switch } from 'react-router-dom';
import Home from './Home';
import LifeCircle from './LifeCircle';

function App() {
  return (
    <>
      <Router basename='/main'>
        <Link to={{pathname:'/home',search:"?id=1",hash:'#abc',state:{msg:'123'}}}>首页</Link>
        <Link to='/lifecircle/123'>生命周期</Link>
        <Route path='/home' exact component={Home}></Route>
        <Route path='/lifecircle/:id' exact component={LifeCircle}></Route>
        <Redirect path='/' to='/home'></Redirect>
      </Router>
    </>
  );
}

export default App;

或者

import React from 'react';
/**BrowserRouter规定路由的形式:需后端配合使用
http://localhost:3000/main/home **/
import { BrowserRouter as Router, Link, Route, Redirect,Switch} from 'react-router-dom';
import Home from './Home';
import LifeCircle from './LifeCircle';

function App() {
  return (
    <>
      <Router basename='/main'>
        <Link to={{pathname:'/home',search:"?id=1",hash:'#abc',state:{msg:'123'}}}>首页</Link>
        <Link to='/lifecircle/123'>生命周期</Link>
        <Route path='/home' exact component={Home}></Route>
        //动态路由:id就是动态参数，可以在页面的props.match.params中获取
        <Route path='/lifecircle/:id' exact component={LifeCircle}></Route>
        <Redirect path='/' to='/home'></Redirect>
      </Router>
    </>
  );
}

export default App;

Router相当于一个容器，用来包裹Route，Link，Redirect等路由组件

basename:定义路由的基础路径，当点击'生命周期'进行跳转时路由地址会变为：/main/lifecircle

Link：组件相当于a标签，用于页面跳转

to后面可以是字符串，直接跟跳转的路由地址
to后面也可以是对象
- pathname：路由地址
- search：在路由地址中添加参数
- hash：在路由中拼接hash值
- state：传递参数给即将跳转的页面，可以在组件的props.location中获取到
- replace:即将跳转的路由地址替换当前路由地址

Route定义不同的路由加载不同的内容

path：定义路由地址
component ：定义加载的组件
比如：访问/main时会加载Home组件
exact：精准匹配路由
当我们有路由/和/home时，如果不精准匹配路由时，当访问/home时也会加载/这个路由

Switch只显示匹配到的第一个路由

Switch匹配到第一个路由就不会继续匹配了,
如果不加Route 里不加 exact，那么凡是Link里面 to 的路径包含了/，
那么就会被匹配到，于是Switch就不继续匹配下去

react 404 页面的处理

<Route  path="*" component={404组件}></Route>

事件跳转

函数组件和类组件都可以通过props.history对象下提供到的方法进行跳转
1. props.history.push('路径')
2. props.history.replace('路径')
3. props.history.go()
4. props.history.goBack()
5. props.history.goForward()
函数组件还可以根据react-router-dom提供的新方法进行跳转

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

在函数组件的return前面声明
const router = useHistory()
router对象下的方法同props.history

最后编辑于：2020.12.13 09:52:13