React Router v4 - 重定向不适用于 Switch

Posted 2023-02-21

【中文标题】React Router v4 - 重定向不适用于 Switch

【英文标题】：ReactRouter v4 - Redirect doesn't work with Switch

【发布时间】：2017-08-10 02:24:51

【问题描述】：

我有一个代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Navigation from './Navigation';
import PublicPage from './PublicPage';
import LoginPage from './LoginPage';
import SecuredPage from './SecuredPage';
import Route, Switch, Redirect, BrowserRouter from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <Navigation>
            <Switch>
                <Redirect from='/' to='/public'/>
                <Route path="/public" component=PublicPage/>
                <Route path="/login" component=LoginPage/>
                <Route path="/secured" component=SecuredPage/>
            </Switch>
        </Navigation>
    </BrowserRouter>,
    document.getElementById("react-app")
);

现在我希望路径 / 重定向到 /public 路径，但不知何故此配置不起作用。其他路线也停止渲染。我想我做的一切都像documentation

【参考方案1】：

交换

<Redirect from='/' to='/public'/>

与

<Redirect exact from='/' to='/public'/>

因为否则 '/' 将匹配所有内容，创建无限重定向循环

【讨论】：

谢谢老大，这真的应该在文档中！现在那里的例子只是使用from='/'

【参考方案2】：

对 rafty 答案的补充还有另一种解决方案：

ReactDOM.render(
    <BrowserRouter>
        <Navigation>
            <Switch>
                <Route exact path="/">
                    <Redirect from='/' to='/public'/>
                </Route>
                <Route path="/public" component=PublicPage/>
                <Route path="/login" component=LoginPage/>
                <Route path="/secured" component=SecuredPage/>
            </Switch>
        </Navigation>
    </BrowserRouter>,
    document.getElementById("react-app")
);

但当然它没有那么干净。