This content originally appeared on DEV Community and was authored by Sunny
I want to switch between components after the user entered the requested info.
Components that will be shown to user by this order:
- {MobileNum } Enter mobile number
- {IdNumber } ID number
- {CreatePassword } Create Password
When all these steps are completed the browser will switch to the home page.
The user must not be able to move between pages until he filled each request.
Without using *React Router* I used to switch only two components with a conditional rendering
Now I definitely want a better way with BrowserRouter as if I had 3-4 components inside Login.
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Redirect,
Route,
Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdentNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';
class Login extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Switch>
<Route path='/' component={MobileNum} />
<Route path='/' component={IdNum} />
<Route path='/' component={CreatePassword } />
</Switch>
</Router>
</div>
);
}
}
export default Login;
I searched the web in reactrouter.com and many others as here for a clean solution but found no answer.
Any Idea what's the best way to do it ?
Thanks
This content originally appeared on DEV Community and was authored by Sunny
Sunny | Sciencx (2021-06-30T09:41:08+00:00) How to navigate and switch components with BrowserRouter. Retrieved from https://www.scien.cx/2021/06/30/how-to-navigate-and-switch-components-with-browserrouter/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.