为什么 React 路由器 v4 会做出不正确的重定向？答案

【问题标题】：Why React router v4 makes incorrect redirect?为什么 React 路由器 v4 会做出不正确的重定向？
【发布时间】：2019-04-03 08:07:44
【问题描述】：

我有一个简单的React 应用程序，我正在尝试实现身份验证逻辑。这是我的应用程序的样子：

class App extends Component {
    render() {
        return (
            <Router history={history}>
                <div className="App">
                    <Switch>
                        <PrivateRoute path="/account" component={Account} />
                        <Route component={PublicLayout} />
                    </Switch>
                </div>
            </Router>
        )
    }
}

我的身份验证逻辑是：如果用户 isAuthenticated === true 渲染 /account 页面，则重定向到 /signin。所以为此我创建了自己的简单PrivateRoute 功能组件：

export default ({ component: Component, ...args }) => {
    return (
        <div>
            <Route {...args} render={(props) => {
                return fakeAuth.isAuthenticated === true
                    ? <Component {...props} />
                    : <Redirect to='/signin' />
            }} />
        </div>
    )
}

因为PrivateRoute path="/account" 不是exact 路径，我希望如果用户转到/account-setting，它会将他重定向到/sign-in。但它不起作用。用户成功前往/account-setting，查看PublicLayout。

这是为什么呢？ route 中没有exact 键，它必须抓取从“/account”开始的所有内容，并在 PrivateRoute 功能组件中使用我的逻辑。

【问题讨论】：

为什么需要重定向？只需渲染 /signin 组件。除此之外，现在您使用的是 fakeAuth，但您可能会考虑使用主 Auth 并从那里重定向，因为身份验证过程可能是异步的

标签： javascript reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

不提供exact 属性并不意味着它会匹配/account、/account-settings，但它会匹配/account、/account/other、/account/other/paths。因此，您需要提供两条路径：

<PrivateRoute path="/account" component={Account} />
<PrivateRoute path="/account-setting" component={Account} />

或者，您可以使用正则表达式：

<PrivateRoute path="/account(?=\S*)([a-zA-Z-]+)" component={Account} />

【讨论】：

很高兴为您提供帮助。