javascript - 为什么 React router v4 会做出错误的重定向？

Question

我有一个简单的 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" 不是确切路径，我希望如果用户转到 /account-setting 它将重定向他到/sign-in。但这不起作用。用户成功转到 /account-setting 并看到 PublicLayout。

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

Answer 1

不提供 exact 属性并不意味着它将匹配 /account、/account-settings 但它会匹配 /帐户，/帐户/其他，/帐户/其他/路径。因此，您需要提供两个路径:

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

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

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