react-router-dom的常见问题总结

下载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 页面的处理

事件跳转
函数组件和类组件都可以通过props.history对象下提供到的方法进行跳转
props.history.push(‘路径’)
props.history.replace(‘路径’)
props.history.go()
props.history.goBack()
props.history.goForward()
函数组件还可以根据react-router-dom提供的新方法进行跳转
import {useHistory} from ‘react-router-dom’
在函数组件的return前面声明
const router = useHistory()
router对象下的方法同props.history