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，{{1} }。因此，您需要提供两个路径：

/account/other/paths

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

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

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

1 个答案: