React js router not properly route to the page through url when deployed

Question

I deployed my react js site. but it can't load pages through url.

it can load homepage https://cekedu.netlify.app/ and when I click sign in it goes to the login page.

but I can't directly go to login page by entering url https://cekedu.netlify.app/login.

but it works in development.

import React from 'react' import './css/typicons.min.css' import ReactDOM from 'react-dom' import User from './components/user' import Header from './components/homeHeader' import Home from './components/home' import {Route, BrowserRouter as Router , Switch,Link} from 'react-router-dom'

import './index.css'
import './css/style.css'
import './css/bootstrap-grid.css'      

class App extends React.Component{    
    render(){
      return(
        <Router>          
          <Switch>
          <Route path="/login">
            <User/>
          </Route>
          <Route path="/">
              <Home/>
          </Route>
          </Switch>              
        </Router>
      )
    }
  }

ReactDOM.render(<App />,document.getElementById('root'));

Answer 1

You can also try by using "exact" prop in Route of Home component.

<Route exact path="/"> <Home/> </Route>

Answer 2

Add "exact" prop to Route which it's path is also included by another Route's path. For example home path / is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with /.

<Router>          
   <Switch>
      <Route path="/login">
         <User/>
      </Route>
      <Route exact**strong text** path="/">
         <Home/>
      </Route>
    </Switch>              
</Router>