Почему React router v4 делает неправильное перенаправление? - PullRequest
Новая
       7

Почему React router v4 делает неправильное перенаправление?

0 голосов
/ 30 октября 2018

У меня есть простое приложение 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.

1 Ответ

0 голосов
/ 30 октября 2018

Отсутствие 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} />
...