本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

react的生命周期 react中的HOOK

注意：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'
		})