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 (
    <>
      
        首页
        生命周期
        
        
        
      
    
  );
}

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 (
    <>
      
        首页
        生命周期
        
        //动态路由:id就是动态参数，可以在页面的props.match.params中获取
        
        
      
    
  );
}

export default App;

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

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

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

1. to后面可以是字符串，直接跟跳转的路由地址
2. 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对象下提供到的方法进行跳转
  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