如何在React Router中进行路由重定向？

在 React Router 中，不同版本进行路由重定向的方式有所不同，下面分别介绍 React Router v5 和 v6 实现路由重定向的方法。

React Router v5

在 React Router v5 中，主要使用 Redirect 组件来实现路由重定向。

1. 安装 React Router v5

如果你还未安装，可以使用以下命令：

npm install react-router-dom@5

2. 基本使用示例

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const OldPage = () => <h1>Old Page</h1>;
const NewPage = () => <h1>New Page</h1>;

const App = () => {
    return (
        <Router>
            <div>
                <Route exact path="/" component={Home} />
                {/* 当访问 /old-page 时，重定向到 /new-page */}
                <Route path="/old-page">
                    <Redirect to="/new-page" />
                </Route>
                <Route path="/new-page" component={NewPage} />
            </div>
        </Router>
    );
};

export default App;

在上述代码中，当用户访问 /old-page 时，会自动重定向到 /new-page。

3. 条件重定向

你还可以根据条件进行重定向，例如根据用户是否登录进行重定向：

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const Dashboard = () => <h1>Dashboard Page</h1>;
const Login = () => <h1>Login Page</h1>;

const App = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLogin = () => {
        setIsLoggedIn(true);
    };

    return (
        <Router>
            <div>
                <Route exact path="/" component={Home} />
                <Route path="/login">
                    {isLoggedIn ? <Redirect to="/dashboard" /> : <Login onLogin={handleLogin} />}
                </Route>
                <Route path="/dashboard">
                    {!isLoggedIn ? <Redirect to="/login" /> : <Dashboard />}
                </Route>
            </div>
        </Router>
    );
};

export default App;

在这个例子中，如果用户未登录访问 /dashboard 会重定向到 /login；如果用户已经登录访问 /login 会重定向到 /dashboard。

React Router v6

在 React Router v6 中，Redirect 组件被移除，使用 Navigate 组件进行路由重定向。

1. 安装 React Router v6

npm install react-router-dom

2. 基本使用示例

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

const Home = () => <h1>Home Page</h1>;
const OldPage = () => <h1>Old Page</h1>;
const NewPage = () => <h1>New Page</h1>;

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                {/* 当访问 /old-page 时，重定向到 /new-page */}
                <Route path="/old-page" element={<Navigate to="/new-page" />} />
                <Route path="/new-page" element={<NewPage />} />
            </Routes>
        </Router>
    );
};

export default App;

这里使用 Navigate 组件，当用户访问 /old-page 时会重定向到 /new-page。

3. 条件重定向

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const Dashboard = () => <h1>Dashboard Page</h1>;
const Login = () => <h1>Login Page</h1>;

const App = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLogin = () => {
        setIsLoggedIn(true);
    };

    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/login" element={isLoggedIn ? <Navigate to="/dashboard" /> : <Login onLogin={handleLogin} />} />
                <Route path="/dashboard" element={!isLoggedIn ? <Navigate to="/login" /> : <Dashboard />} />
            </Routes>
        </Router>
    );
};

export default App;

同样地，根据用户是否登录进行条件重定向。在 React Router v6 中，Navigate 组件可以直接在 element 属性中使用来实现重定向逻辑。