如何在 React Router v6 中重定向？

Question

我正在嘗試升級到 React Router v6 ( react-router-dom 6.0.1 )。

這是我更新的代碼：

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route render={() => <Navigate to="/" />} />
  </Routes>
</BrowserRouter>

最后一條Route將 rest 的路徑重定向到/ 。

但是，我收到一個錯誤

TS2322: 類型 '{ render: () => Element; }' 不可分配給類型 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'。 類型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)”上不存在屬性“render”。

但是，根據文檔，它確實具有Route的render 。 我怎樣才能正確使用它？

Answer 1

我認為您應該使用不匹配路由方法。

在文檔中檢查這一點。

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

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>

更新 - 2022 年 3 月 18 日

為了保持歷史干凈，你應該設置replace道具。 這將避免用戶單擊返回后的額外重定向。 感謝@Paul 這個提示。

Answer 2

我找到了另一種方法來做到這一點：

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

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

https://reactrouter.com/docs/en/v6/getting-started/overview#navigation

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

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

Answer 5

對於 react-router 版本 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 { useState } from "react"
import { Navigate } from "react-router-dom"
const [login, setLogin] = useState(true)
return (<>
{!login && <Navigate to="/login" />}
<>)

Answer 7

在反應的 V5 中，即。 react-router-dom 我們有 Redirect 組件。 但是在 React V6 中，它被更新為導航組件。

我們可以在此組件中傳遞替換，以避免在單擊后退和前進選項時發生不必要的重定向。

下面附上使用演示：

<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 8

對於類組件，首先您應該制作一個功能組件，然后使用 HOC 技術使用 useNavigate react hook。 像這樣：

withrouter.js：

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

export const withRouter = WrappedComponent => props => {
    return (<WrappedComponent {...props} navigate={useNavigate()}/>);
};

然后在其他類組件中使用它，如下所示：

export default withRouter(Signin);

並使用道具進行重定向，如下所示：

this.props.navigate('/');

Answer 9

這是一個使用react-router-dom中的useHistory的示例

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

const { REACT_APP_REST } = process.env;

function AllProducts() {

    const history = useHistory();

    const route = () => {
        history.push("/admin/product");
    }

    return (
        <>
            <Button
                className="btn-fill btn-wd"
        
                onClick={() => {
                    route()
                }}
            >
                NEW PRODUCT
            </Button>


        </>
    );
}

export default AllProducts;

Answer 10

從“react-router-dom”導入 { useNavigate }； 從“@mui/material”導入{按鈕}；

常量組件 =()=>{

const navigate = useNavigate();

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

返回（<> //............

后退

</>)

}