1. 安装依赖
cnpm i -S react-router-dom@6
2. react-router-dom V6 属性:BrowserRouter 、Routes 、Route、Link
.
import {BrowserRouter, Routes, Route, Link } from "react-router-dom"
function Index(){
return <div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Link to="/page2">link</Link>} />
<Route path="/page1" element={<Page1/>}/>
<Route path="/page2" element={<Page2/>}/>
</Routes>
</BrowserRouter>
</div>
}
3. 编程式跳转:useNavigate
1.必须在函数组件内使用
2.如果想要在类组件内使用,可以在外包装一层函数组件
函数组件使用
import {BrowserRouter, Routes, Route , useNavigate} from "react-router-dom"
function Index(){
return <div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Button/>} />
<Route path="/page1" element={<Page1/>}/>
<Route path="/page2" element={<Page2/>}/>
</Routes>
</BrowserRouter>
</div>
}
function Button(){
const navigate = useNavigate()
return <button onClick={()=>navigate("/page2")}>编程式跳转</button>
}
类组件使用
//Index.js
import {BrowserRouter, Routes, Route } from "react-router-dom"
class Index extends React.Component{
render() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/page1" element={<NavigateComponent element={Page1} />} />
<Route path="/page2" element={<NavigateComponent element={Page2} />} />
</Routes>
</BrowserRouter>
</div>
);
}
}
/*NavigateComponent.js*/
import {useNavigate} from "react-router-dom"
function NavigateComponent(props){
const navigate = useNavigate()
return <div>
<props.element navigate={navigate} />
</div>
}
//Page1.js
class Page1 extends React.Component{
render() {
return <div>
page1
<button onClick={this.handleTo}>跳转2</button>
</div>
}
handleTo =()=>{
this.props.navigate("/page2")
}
}