Как сделать условную маршрутизацию, если и только если выполняются некоторые условия, тогда должна происходить только маршрутизация. например, если и только если пользователь вводит правильные учетные данные, вход в систему должен быть успешным, и пользователь должен увидеть страницу приветствия.
если мы напрямую нажмем какой-нибудь URL-адрес, например «localhost: 8080/welcome», который не следует переходить на страницу приветствия, страница приветствия должна отображаться только после входа в систему. как я могу добиться этого, может ли кто-нибудь помочь мне, пожалуйста .. спасибо.
App.js
import React, { Component } from 'react';
import Header from './Header';
class App extends Component{
render(){
return(
<div>
<Header />
</div>
);
}
}
export default App;
Заголовок.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';
class Header extends Component{
render(){
return(
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><Link to={Login}>Login</Link></li>
<li><Link to={Login}>SignUp</Link></li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Header;
AllRoutes.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';
import Welcome from './Welcome';
class AllRoutes extends Component{
render(){
return(
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={SignUp} />
<Route exact path="/Welcome" component={Welcome} />
</Switch>
);
}
}
export default AllRoutes;
Добро пожаловать.js
import React, { Component } from 'react';
class Welcome extends Component{
render(){
return(
<div>
<h2>Welcome to MainPage..</h2>
</div>
);
}
}
export default Welcome;