react router中v6版本与v5版本的差别

注意：v6版本把路由组件默认接收的三个属性给移除了，就是props中的history: {…}, location: {…}, match。

它们的差别

1.Route中 element 替换了 component/render 属性，且值是组件，⽽⾮组件名

2.Routes 替换了 Switch，并且强制添加

3.Navigate 组件替换了 Redirect 下⾯是V6版本的写法

import {
          
    BrowserRouter as Router, Route, Routes, Link，Navigate} from "react-router-dom"; 
function App(){
          
   
	return (
		<Router>
			<Link to="/Login">登录</Link>
			<Link to="/Register">注册</Link>
			<Routes> 
				<Route exact path="/Login" element={
          
   <Login/>} /> 
				<Route exact path="/Register" element={
          
   <Register/>} /> 
				<Navigate to="/Home"></Navigate>
		    </Routes>
		</Router>
	)
}

4.新的api:Outlet 嵌套路由的写法更完善，简单

<Route exact path="/Login" element={
          
   <Login/>}>
	<Route path="/login/home" element={
          
   <div><h1>我是home</h1></div>}></Route>
	<Route path="/login/about" element={
          
   <h1>我是about</h1>}></Route>
</Route>
//登录组件中
import React, {
          
    Component } from react; 
import {
          
    Outlet } from react-router-dom; 
export default class Login extends Component {
          
    
	render() {
          
    
		return (<div>
					<p>我是登录组件</p>
	 				<Outlet/>
	 			</div>;)
	}
}

5.⽤useNavigate代替useHistory

import {
          
    useNavigate } from react-router-dom;
 	const navigate = useNavigate(); 
	navigate(path);// push
	navigate(path, {
          
   replace: true});// replace
	
	//携带参数
	navigate(/listPage, {
          
   
	 state: {
          
    
		 aaa: 123, 
		} 
	})

6.增加很多的hook 1.获取params参数useParams;

2.获取search参数useSearchParams 使⽤useSearchParams hook来访问查询参数。其⽤法和useState类似，会返回当前对象和更改它的⽅法 更改searchParams时，必须传⼊所有的查询参数，否则会覆盖已有参数

import {
          
    useParams } from react-router-dom;
	const params = useParams();
	
import {
          
    useSearchParams } from react-router-dom;
	const [searchParams, setSearchParams] = useSearchParams();
		console.log(searchParams.get(id))
		setSearchParams({
          
   
			name: foo
		})