CODEWITHSUNDEEP
javascriptreactjsroutesreact-router-dom
Ganpat Kakar
Ganpat Kakar

Reputation: 163

React Router V4 nested routers are not working on page reload

I have created a new website http://gk-chart.org/ with react and added routing using react-rotuter-dom.

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";

and added routers as :-

<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route path="/galery" component={Galery}></Route>
</Switch>

for nested routing of multiple types of charts i have added these routes in the Gallery component

<Route exact path={this.props.match.path} component={LineChart}></Route>
<Route path={`${this.props.match.path}/line`} component={LineChart}></Route>
<Route path={`${this.props.match.path}/lineChartFill`} component={LineChartFill}></Route>
<Route path={`${this.props.match.path}/lineChartComparision`} component={LineChartComparision}></Route>
<Route path={`${this.props.match.path}/lineChartComparisionFill`} component={LineChartComparisionFill}></Route>

Routers are working properly on click of links but when i try to reload the page then page is not loading again.

In the Gallery page http://gk-chart.org/galery there are multiple nested routes present, when i click on these routes they loads properly, but when i reload the page, it won't load. Please help me to resolve this issue.

Upvotes: 2

Views: 2634

Answers (2)

Ganpat Kakar
Ganpat Kakar

Reputation: 163

Finally after roaming to so many websites for this answer i got to know that react have two types of routers :-

  1. HashRouter for static routing websites or may be called as self driven routing.

  2. BrowserRouter for server supported routing.

I was using the wrong one for my website as BrowserRouter, since i was not having any kind of support of server (node, python etc...) So i have to use HashRouter

import {HashRouter as Router, Route, Switch} from "react-router-dom";

Fixed the issue of http://gkchart.com/ using Hashrouter's.

Upvotes: 1

yxre
yxre

Reputation: 3704

The server is not aware of your client side routes. Your build process probably produces a single index.html that references your resources. That index.html is being placed at /galery/index.html. When you click refresh, the server looks for a file at /galery/line/index.html, which it doesn't find.

This is a common problem. In order to fix this, many people tell the server to serve the /galery/index.html instead using some kind of rule. It depends on how your files are being hosted. The react app will kick in client side, see the slightly different route, and render the route correctly.

Upvotes: 1

Related Questions