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'));

Kristoffer Karlsson · Accepted Answer · 2020-04-22 21:20:16Z

2

You need to make sure that all paths respond with your the index.html page that your React app is used in.

For netlify, create a file named "_redirects" in the public foler and add this.

/* /index.html 200

answered Apr 22, 2020 at 21:20

Kristoffer Karlsson

1826 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas Garg · Accepted Answer · 2020-04-22 21:32:09Z

0

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

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

answered Apr 22, 2020 at 21:32

Vikas Garg

444 bronze badges

1 Comment

Abhiram P Jayan Over a year ago

I tryed this but still not working in deployed site.

DeepthiSRao · Accepted Answer · 2022-08-15 16:59:30Z

0

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 path="/">
         <Home/>
      </Route>
    </Switch>              
</Router>

edited Aug 15, 2022 at 16:59

answered May 17, 2022 at 20:19

DeepthiSRao

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related