react学习笔记-05 —— react-router-dom v6

目录

v6和v5的区别

路由的安装

基本使用

路由传参

 useParams

useSearchParams

 useLocation

useNavigate

useRoutes

---

v6和v5的区别

---

<Switch>变为<Routes>。

<Route>的新特性变更。

嵌套路由变得更简单。

useNavigata代替useHistory。

新钩子useRoutes代替react-router-config。

大小减少。
 

路由的安装

---

npm i react-router-dom

基本使用

---

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//引入要跳转的组件
import 组件名  from '路由地址';


<在路由外的组件或内容，这个内容就会一直显示/>
<Routes>
      <Route path='/地址'  element={ <组件名 />}>
            {/* 这里使用的是默认index */}
            <Route index element={<组件名 />}></Route>
           <Route path='地址' element={<组件名 />} />   // 子路由
      </Route>
 </Routes>

连接有两种Link和NavLink ，之间的不同是NavLink可以通过isActive来控制导航的活跃状态，这里的isActive不用赋值。

<NavLink className={({ isActive }) => isActive ? 'selected' : ''} to='page'><div>首页</div></NavLink>
<Link to='/'><div id='zhuxiao'>注销</div></Link>

 子路由显示位置：父组件由对应的组件里，  Outlet 标签，放在你想显示 的位置上。

<Outlet />

路由传参

---

 useParams

import { useParams } from 'react-router-dom';


<Route path='/productdetils/:num' element={<ProductDetils />}></Route>


<Link to={`/productdetils/${item.num}`}>{item.num}</Link>


export default function ProductDetils() {
    let params = useParams();
    console.log(params);
    return (
        <div><h1>ProductDetils</h1></div>
    )
}

useSearchParams

<Route path='/productdetils' element={<ProductDetils />}></Route>


<Link to={`/productdetils?num=${item.num}`}>{item.num}</Link>


import { useParams, useSearchParams } from 'react-router-dom';
const [searchParams, setSearchParams] = useSearchParams();
console.log('searchParams', searchParams.get('num'));

 useLocation

获取路径相关的信息使用useLocation。

useNavigate

用useNavigate代替v5的useHistory。

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

const navigate = useNavigate();
    function goBacke() {
        // navigate('/nowhome/page');//有历史记录
        // navigate(-2)
        navigate('/nowhome/page', { replace: true })//没有跳转过来那一页的记录
    }
    return (
        <div>
            <h1>ProductDetils</h1>
            <button onClick={goBacke}>返回</button>
        </div>
    )

useRoutes

声明式创建路由

export default function HandleRoutes() {
    let element = useRoutes([
        {
            path: "/",
            element: <Home />
        }, {
            path: "/productdetils",
            element: <ProductDetils />
        },
        {
            path: "/nowhome",
            element: <NowHome />,
            children: [
                {
                    index: true,//这里设置了默认显示子路由
                    element: <Page />
                },
                {
                    path: "page",
                    element: <Page />,
                    index: true
                },
                {
                    path: "page",
                    element: <Page />
                }, {
                    path: "product",
                    element: <Product />
                }, {
                    path: "bound",
                    element: <Bound />
                }, {
                    path: "about",
                    element: <About />,
                    children: [
                        {
                            index: true,
                            element: <NowPlan />
                        },
                        {
                            path: "nowplan",
                            element: <NowPlan />
                        }, {
                            path: "uscontent",
                            element: <UsContent />
                        }, {
                            path: "jionus",
                            element: <JionUs />
                        },
                    ]
                }, {
                    path: "concat",
                    element: <Concat />
                }
            ]
        },
        {
            path: '*',
            element: <div>Not Fond 404</div>
        }
    ]);
    return element;
}

import HandleRoutes from './HandleRoutes';

function App() {
  return (
    <div className="App">
      <Router>
        <HandleRoutes></HandleRoutes>
      </Router>
    </div>
  );
}