react，v6鉴权路由问题

在使用的react版本如下：

img


v6的鉴权路由不能使用Redirect的话，可以使用什么代替？

https://zhuanlan.zhihu.com/p/431389907
https://zhuanlan.zhihu.com/p/435424053

img

img

因为 v6废除 里 Redirect

利用Navigate组件或者useNavigate hooks自己封装组件，代码如下：

import { useEffect } from "react";
import {
    BrowserRouter,
    Link,
    NavLink,
    Routes,
    Route,
    Navigate,
    useNavigate,
} from "react-router-dom";

import "./App.css";

//引进路由页面组件
import About from "./views/About";
import Home from "./views/Home";
import Login from "./views/Login";
import Center from "./views/Center";

//路由配置
function App() {
    return (
        // 声明当前要用一个非hash模式的路由
        // HashRouter：hash模式的路由（路径带#）
        // BrowserRouter：非hash模式的路由
        <BrowserRouter>
            {/* 声明式导航 */}
            {/* 指定跳转的组件，to用来配置路由地址,Link和NavLink组件可以用在其它组件中
            (前提是必须在Router（BrowserRouter或HashRouter）内部，一般情况下Router都
            在根组件（App）最外层，所有Link和NavLink组件几乎可以放在任何地方)，
            这里是为了方便直接在这里用了，使用这种方式跳转称为声明式导航*/}
            <Link to='/'>首页 </Link>
            <Link to='/center'>个人中心 </Link>

            {/* NavLink具备Link的所有功能，并添加了高亮显示
            在NavLink被激活选中时会被自动添加一个class：active */}
            <NavLink to='/about'>关于 </NavLink>
            {/* 自定义NavLink选中时的class */}
            {/*NavLink具有一个className属性，它接收一个回调函数，
            回调函数可获得的参数中有一个isActive可以判断是否选中，
            这里是点击登录时，给登录加上自定义的AiljxActive class，
            使登录变成黄色  */}
            <NavLink
                to='/login'
                className={({ isActive }) => (isActive ? "AiljxActive" : "")}>
                登录
            </NavLink>

            {/* 路由出口，路由对应的组件会在这里进行渲染 */}
            <Routes>
                {/* 指定路径和组件的对应关系 */}
                <Route path='/home' element={<Home />}></Route>

                <Route path='/login' element={<Login />}></Route>

                {/* 想让页面能同时接收这两种形式的传参，可以写两个路由 */}
                {/* 使用Params */}
                {/* id是占位符，取参的时候取id */}
                <Route path='/about/:id' element={<About />}></Route>
                {/* 使用SearchParams */}
                <Route path='/about' element={<About />}></Route>

                {/* 路由鉴权 */}
                {/* 封装AuthComponent组件进行路由鉴权 */}
                <Route
                    path='/center'
                    element={
                        <AuthComponent>
                            {/* 鉴权路由组件中添加需要鉴权的组件 */}
                            <Center></Center>
                        </AuthComponent>
                    }></Route>

                {/* 路由重定向，V6版本删除了Redirect组件
                推荐方案一：可使用Navigate组件替代 */}
                <Route path='/' element={<Navigate to='/home' />}></Route>
                {/* 推荐方案二：利用useNavigate自定义Redirect组件 */}
                <Route path='*' element={<Redirect to='/home' />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

// 利用useNavigate hooks 自定义重定向组件
function Redirect({ to }) {
    const nav = useNavigate();
    useEffect(() => {
        // 编程式导航，在JS逻辑中进行页面跳转
        // 第一个参数跳转地址，第二个参数是配置项
        // replace: true开启重定向
        nav(to, { replace: true });
    });
}

// 路由鉴权组件
function AuthComponent({ children }) {
    // localStorage中存在V6Router时才渲染组件，不然就重定向到登录页
    return localStorage.getItem("V6Router") ? (
        children
    ) : (
        <Navigate to='/login' />
    );
}

更多react的demo知识代码可见：https://gitee.com/ailjx/react-study-demo