Я использую реакцию и реакцию-маршрутизатор v4 для маршрутизации. Я создал PrivateRoutes для аутентификации, и поскольку я их реализовал, я не могу использовать маршрут ошибки для несоответствия.
Маршрут ошибки работает каждый раз, когда я попадаю не на ту страницу, но проблема в том, что он отображается каждый раз для любого маршрута.
Я пытался создать обычную, но каждая страница, которую я открываю, сначала отображается, а затем после этого я вижу, что так и должно быть.
const Error = () => {
console.info('error showing');
return (
<div>
<p>Error: Route doesn't exist</p>
</div>
);
};
const PrivateRoute = ({ component: Component, token, error, ...rest }) => (
<Route
{...rest}
render = {props => (
token !== '' ? <Component {...props} /> : <Redirect to = "/login" />
)}
/>
);
render() {
return (
<BrowserRouter>
<Switch>
<Route path = "/login" component = {Login} />
<Route path = "/signup" component = {Signup} />
<Layout>
<PrivateRoute path = "/" component = {Home} exact token = {this.props.login.token} />
<PrivateRoute path = "/upload" component = {Upload} exact token = {this.props.login.token} />
<PrivateRoute path = "/certificates" component = {Certs} exact token = {this.props.login.token} />
<Route component = {Error} />
<PrivateRoute path = "/transactions" component = {Tables} exact token = {this.props.login.token} />
<PrivateRoute path = "/issue" component = {Issue} token = {this.props.login.token} />
<Route component = {Error}/>
</Layout>
</Switch>
</BrowserRouter>
);
}
}





Проблема заключается в том, что вы визуализируете маршруты без какого-либо регистра Switch, обертывающего PrivateRoutes. Поскольку компонент макета отображается во внешнем операторе Switch, если маршруты /login и /signup не совпадают, он будет автоматически отображаться без учета того, какой PrivateRoute соответствует. Таким образом, вам нужно обернуть Routes, отображаемые как компонент children to Layout, внутри Switch и иметь только один экземпляр маршрута Error.
Правильный способ обработки PrivateRoutes будет следующим.
render() {
return (
<BrowserRouter>
<Switch>
<Route path = "/login" component = {Login} />
<Route path = "/signup" component = {Signup} />
<Layout>
<Switch>
<PrivateRoute path = "/" component = {Home} exact token = {this.props.login.token} />
<PrivateRoute path = "/upload" component = {Upload} exact token = {this.props.login.token} />
<PrivateRoute path = "/certificates" component = {Certs} exact token = {this.props.login.token} />
<PrivateRoute path = "/transactions" component = {Tables} exact token = {this.props.login.token} />
<PrivateRoute path = "/issue" component = {Issue} token = {this.props.login.token} />
<Route component = {Error}/>
</Switch>
</Layout>
</Switch>
</BrowserRouter>
);
}