So I was trying to make a website with a main page and a login page (and maybe more in the future) in React js.
I have two routes, one route that shows the login screen and another one that shows the main screen.
Now the problem is that the Login component shows, but the MainScreen does not. (When I paste "http://localhost:3000/home/" in the URL bar in the browser, it still shows the Login component)
Here is my code that I have inside App.js:
return (
<div className="App">
<Router>
<Switch>
<Route path="/" >
<LoginScreen />
</Route>
<Route path="/home" >
<MainScreen />
</Route>
</Switch>
</Router>
</div>
);
Because the condition of your first rout is being met and rendered.
add EXACT and it should work.
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" >
<LoginScreen />
</Route>
<Route exact path="/home" >
<MainScreen />
</Route>
</Switch>
</Router>
</div>
);