使用 React Router 设置带重定向的默认路由

Set a Default route with redirect using React Router

使用该Navigate元素在 React Router 中设置带重定向的默认路由，例如<Route path="/" element={<Navigate to="/dashboard" />} />. 元素在
Navigate呈现时更改当前位置。

应用程序.js


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

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ redirect to /dashboard when user goes to / */}
          <Route path="/" element={<Navigate to="/dashboard" />} />

          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/login" element={<Login />} />

          {/* 👇️ only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </div>
  );
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

function About() {
  return <h2>About</h2>;
}

反应路由器默认路由导航

我们使用Navigate元素将用户重定向到/dashboard每次他们去/路线时。

应用程序.js


<Route path="/" element={<Navigate to="/dashboard" />} />

如果您需要为每条路线执行此操作，请使用星号*路径。

应用程序.js


<Route
  path="*"
  element={
    <Navigate to="/dashboard" />
  }
/>

当pathprop 设置为星号*时，它仅在没有其他路由匹配时匹配。

您还可以有条件地确定要重定向到的页面。

下面是一个使用isAuthenticated布尔值来确定是重定向到/dashboard还是重定向到的示例/login。

应用程序.js


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

export default function App() {
  const isAuthenticated = true;

  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />

          <Route
            path="/"
            element={<AuthWrapper isAuthenticated={isAuthenticated} />}
          />

          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/login" element={<Login />} />

          {/* 👇️ only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </div>
  );
}

// 👇️ conditionally redirect based on isAuthenticated boolean
const AuthWrapper = ({isAuthenticated}) => {
  return isAuthenticated ? (
    <Navigate to="/dashboard" replace />
  ) : (
    <Navigate to="/login" replace />
  );
};

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

function About() {
  return <h2>About</h2>;
}

该AuthWrapper组件检查isAuthenticated布尔值是否存在true
，如果是，则重定向到/dashboard，否则重定向到/login。

我们的AuthWrapper组件使用条件逻辑并确定什么时候应该渲染什么。

–