为什么 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" 不是 exact 路径，我希望如果用户转到 /account-setting，它会将他重定向到 /sign-in。但它不起作用。用户成功转到 /account-setting 并查看 PublicLayout。

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

Answer 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} />

为什么 React router v4 会进行错误的重定向？

Why React router v4 makes incorrect redirect?

javascript

reactjs

react-router

react-router-v4

react-router-dom