react-router6

1、安装

npm install react-router-dom@6 -S
yarn add react-router-dom@6

2、使用

//index.js
import {BrowserRouter as Router} from "react-router-dom"

root.render(
	<Router>
    	<App/>
    </Router>
)

//App.js
//在router6中，移除了router5的component，render，而且children也换了作用
//挂载组件换成了element
import {Routes,Route} from "react-router-dom"
return (
	<Routes>{/*必须写Routes*/}
    	<Route path="/" element={<Home/>}></Route>
        {/*about可以不用写“/”*/}
        <Route path="about" element={<About/>}></Route>
    </Routes>
)


//menu.js
<Link to="/"></Link>
<Link to="/about"></Link>

3、获取参数

import {useLocation,useParams,useMatch} from "react-router-dom"

const student=()=>{
    const {id}=useParams()//通过useParams()获取参数
    const location=useLocation()//获取当前的地址信息
    const match=useMatch("/about")//检查当前url是否匹配某个路由，如果路径匹配，返回一个对象，不匹配返回一个null
    const nav=useNavigate();//获取一个用于跳转页面的函数
    
    //比如
    const clickHandler=()=>{
        nav("/home")
        nav("/home",{type:"replace"})
    }
}

4、路由嵌套

1、路由嵌套

//App.js
<Routes>
	<Route path="/" element={<Home/>}></Route>
    <Route path="/about" element={<About/>}>
    	<Route path="hello" element={<Hello/>}></Route>
	    <Route path="abc" element={<Abc/>}></Route>
    </Route>
    <Route path="/student:id" element={<Home/>}></Route>
</Routes>

2、出口

<Outlet/>

5、Navigate

//Navigate组件用来跳转指定的位置，默认使用push跳转
<Navigate to="/student/1" repalce/>//替换页面，不留痕迹

6、NavLink

<NavLink style={({isActive})=>{
        return isActive?{backgroundColor:"yellow"}:null
    }} to="/student/2">学生</NavLink>