React路由使用

基本使用：yarn add react-router-dom @6

import { BrowserRouter ,Routes,Route,Link} from 'react-router-dom'

import Login from 'Login.js'

import Layout from 'Layout.js‘

fucntion App(){

        return(

                <BrowserRouter>                

                        <Link to='/'>首页</Link>                //导航链接

                        <Link to='/about'>关于<Link>

                       <Routes>                                        //提供一个路由出口

                                <Route path="/" element={</Login>}>

                                <Route path="/about" element={</Layout>}>  //导航链接，完成路由跳转匹配

                        </Routes>

                </BrowserRouter>

        )

}

export default Layout

编程式导航路由：作用通过js编程方式进行路由页面跳转

使用方法：

       1.导入useNavigate钩子函数

        2.执行钩子函数得到跳转函数

        3.执行跳转函数完成跳转

import { useNavigate } from 'react-router-dom'

function Login(){

        const navigate = useNavigate();

        function goAbout(){

                navigate('/about');

        }

        return (

                <div> 

                       <button onClick={goAbout}> 

                </div>

        )

}

export default Login

编程式导航-跳转携带参数：

1.searchParams传参：

        导入import {useSearchParams,useParams} from 'react-router-dom'

        传：navigate('/about?id=1001')

        取：let [params] = useSearchParams()

                let id = params.get('id')

2.Params传参：

        传：navigate('/about/1001)

        取：let params = useParams()

                let id = params.id

嵌套路由

1.在根组件定义嵌套路由：在原本路由的基础上嵌套。

        第一步：

        <Route path="/" element={<Layout/>}>

                <Route path="board" element={<Board/>}>

                <Route path="article" element={<Article/>}>

        <Route>

        第二部：在首页的页面上：

        import {outlet} from 'react-router-dom'

        function Layout (){

                return(

                        <div>

                                 <outlet>    //将子路由放在首页的入口

                        <div>

                }

}