概述

新建工程与安装react-router

npx create-react-app react-router6

npm i react-router-dom

<aside> 🔥 注意下面的内容也不是最新，参照官网生成了一个最新的路由应用。

</aside>

官网

Tutorial v6.22.0

1⃣Navigate 替代 Redirect

export default function Home() {
    const [count,setCount] = useState(0)

    return (
        <div>
            <h2>Home组件内容</h2>
            {count===2?<Navigate to='/about' replace/>:<h1> Count:{count}</h1>}
            <div>navigate组件只要一渲染就会引起跳转</div>
            <div>使用navigate 跳转到About</div>
            <button type="button" className='btn btn-danger' onClick={()=>setCount(2)}>点我变成2</button>
        </div>
    )
}

注册路由需要这样写：

             <MyNavLink to="/home">Home</MyNavLink>
	            <MyNavLink to="/about">About</MyNavLink>

							 {/* 注册路由 */}
              {/* 如过路径都没匹配上默认返回public 文件夹 index.html 里面的内容 会造成css样式丢失问题（因为css的路径不对）*/}
              {/*  href="%PUBLIC_URL%/css/bootstrap.css" 用绝对路径不用Redirect也没这问题 （或者相对路径的点去蒂奥变成绝对路径） */}
              <Routes>
                {/* caseSensitive 路径匹配大小写敏感 */}
                <Route path="/home" /* caseSensitive */ element={<Home/>} />
                <Route path="/about" element={<About/>} />
                <Route path='/' element={<Navigate to='/about' />}/>
              </Routes>

2⃣NavLink的高亮

import React from 'react';
import { NavLink } from 'react-router-dom';

export default function MyNavLink(props) {
  
  function computedClassName({ isActive }) {
    return isActive ? 'list-group-item active' : 'list-group-item';
  }
  return (
    <div>
      {/*NavLink 可以直接写 children 属性 相当于标签体内容  */}
      <NavLink
        // 每次点击路由  className里面的函数都会执行
        // className={({ isActive }) =>
        //   isActive ? 'list-group-item active' : 'list-group-item'
        // }
        // {...props}

        className={computedClassName}
        {...props}
      />
    </div>
  );
}