CODEWITHSUNDEEP
javascriptreactjshashreact-router-dom
Rahul Sagore
Rahul Sagore

Reputation: 1658

React HashRouter not rendering other paths, only Rendering root component '/'

My Setup:

routes.js

const Router = () => (
  <Switch>
    <Route path="/" component={ Dashboard } />
    <Route path="/somepath" component={ SomePath } />
  </Switch>
);

index.js

<HashRouter>
  <App />
</HashRouter>

app.js:

lass App extends Component {
  render() {
    return (
      <div className="main-app">
        <Header />
        <div className="page__container">
          <Router />
        </div>
        <Footer />
      </div>
    );
  }
}

Issue is, when I navigate to localhost/#/ rootpath, it is correctly rendering Dashboard component as mentioned in routes.js file. But When I naviagte to localhost/#/somepath, it not rendering component for somepath, it is stil rendering / Component.

Even in React Devtool it shows <Route path="/"> is loaded, not <Route path="/somepath">

Upvotes: 1

Views: 2980

Answers (1)

Amruth
Amruth

Reputation: 5912

You may have to add exact to match the path. add exact prop to Route

<Route exact path="/somepath" component={ SomePath } />

Upvotes: 4

Related Questions