React——react-router-dom V6 使用

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")
    }
}