如何在 React Router v6 中重定向？

Question

我正在尝试升级到 React Router v6 ( react-router-dom 6.0.1)。

\n

这是我更新的代码：

\n

import { BrowserRouter, Navigate, Route, Routes } from \'react-router-dom\';\n\n<BrowserRouter>\n  <Routes>\n    <Route path="/" element={<Home />} />\n    <Route path="/lab" element={<Lab />} />\n    <Route render={() => <Navigate to="/" />} />\n  </Routes>\n</BrowserRouter>\n

\n

最后Route是将其余路径重定向到/.

\n

但是，我收到了一个错误

\n

\n

TS2322：类型 \'{ 渲染：() => 元素；}\' 不可分配给类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\”。\xc2\xa0\xc2\xa0Property \'render\' 在类型 \'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\' 上不存在。

\n

\n

然而，根据文档，它确实有renderfor Route. 我怎样才能正确使用它？

\n

Answer 1

我认为你应该使用不匹配路由方法。

在文档中检查这一点：添加“不匹配”路由

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

为了保持历史记录干净，你应该设置replaceprop. 这将避免用户点击返回后额外的重定向。

Answer 2

我找到了另一种方法来做到这一点：

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

请参阅概述、导航。

Answer 3

创建文件 RequireAuth.tsx

import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  let { user } = useAuth();
  let location = useLocation();

  if (!user) {
    return <Navigate to="/" state={{ from: location }} replace />;
  } else {
    return children;
  }
}

导入组件以需要用户使用私有路由器：

import { Routes as Switch, Route } from "react-router-dom";

import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";

export function Routes() {
  return (
    <Switch>
      <Route path="/" element={<SignIn />} />
      <Route
        path="/dashboard"
        element={
          <RequireAuth>
            <Dashboard />
          </RequireAuth>
        }
      />
    </Switch>
  );
}

Answer 4

在React的第5版中，即react-router-dom，我们有Redirect组件。但在 React 6 版本中，它更新为 Navigate 组件。

我们可以在这些组件中传递替换，以避免单击后退和前进选项时不必要的重定向。

下面附上使用演示：

<Route path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
<Route path="/register" element={user ? <Navigate to="/" replace /> : <Register />} />

Answer 5

对于反应路由器版本 6

编辑后的新示例----->（更简单易读）

import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from '../NavbarCompo/About';
import Contact from '../NavbarCompo/Contact';
import About from '../NavbarCompo/About';
import Login  from '../NavbarCompo/Login';
import Navbar from '../Navbar/Navbar';
import Error from '../pages/error';
import Products  from '../pages/products';
import Data from '../NavbarCompo/Data';

const Roter=()=>{
    return (
    <Router>

            <Navbar />
        <Routes>
            
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/login' element={<Login />} />
            <Route path='/product/:id' element={<Products />} />
            <Route path='/data' element={<Data />} />
            <Route path ='*' element={<Error />} />
        </Routes>


    </Router>
    )
}
export default Roter;

看例子

import React from "react";
import Form from "./compo/form";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Route,Routes,Navigate } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Form />
  },
  {
    path: "/about",
    element: <h1>hola amigo,you are in about section</h1>
  },
  {
    path:"*",
    element:<Navigate to="/" replace />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

看看这个 https://reactrouter.com/en/main/start/overview

Answer 6

import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";

const component =()=>{

    const navigate = useNavigate();

    const handelGoToLogin = () => {
        navigate('/auth/login')
    }

    return(<>
        //.........
    
        <Button onClick={handelGoToLogin} variant="outlined" color="primary" size="large" fullWidth>
             Back
        </Button>

    </>)
}

Answer 7

      <BrowserRouter>
        <Routes>
          <Route path="home" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route index element={<Navigate to="/home" replace />} />
        </Routes>
      </BrowserRouter>