Routes gets undefined after refresh in react

Question

App.jsx

<Router history={history}>
      <>
        <Switch>
          <Route path="/" exact component={HomePage} />          
          <Route path="/test/:id" exact component={TestPage} /> 
          <Route component={NotFound} />         
        </Switch>
      </>
</Router>

HomePage.jsx inside render()

<Link to="/test/1" >Test link</Link>

When I click on the link the page successfully redirects me on http://localhost:8080/test/1 and i can see the page but If I click refresh the page is gone and I can only see the blank screen, also If I want to access it from outside i.e. If I directly type the same url on browser I cannot see the page, It's blank. How to manage it on refresh and access it from outside?

Message on console I get on refresh

Hello @ssk I don't know exactly where to edit the "main.js" to "/main.js" I can see { "name": "minimal-webpack-react", "version": "2.0.0", "description": "Boilerplate for react and webpack", "main": "index.js", } Should I edit it here? — Adarsh, Mar 02 '20 at 08:05

tudor.gergely · Accepted Answer · 2020-03-02T08:10:50.447

5

The problem is the app cannot load your main.js script from you second url (it tries to load it from /test/main.js). You need to use an absolute path to load from / instead of /test

Replace you script tag with this one (loading it from /main.js): <script type="text/javascript" src="/main.js">

You can refer to this answer for a more detailed explanation: https://stackoverflow.com/a/24028813/3350692

edited Mar 02 '20 at 08:10

answered Mar 02 '20 at 08:05

tudor.gergely

4,800
1
16
22

Hello @tudor.gergely, but I have inspected the source of page when it's working there also I can see "main.js" and it's working totally fine – Adarsh Mar 02 '20 at 08:10
yes, but when you enter /test (or refresh on /test) it will try and load your script from that url because you used a relative path. Use absolute paths for scripts (like I've shown you in the answer) and you will not have this problem. – tudor.gergely Mar 02 '20 at 08:11
Ok, I will edit that but where can I find that main.js path, my webpack look something like this `output: { filename: '[name].js', path: commonPaths.outputPath, chunkFilename: '[name].js', }` Is this the place to edit ? I exactly don't know where to find the path for main.js – Adarsh Mar 02 '20 at 08:15
where is your index.html file? – tudor.gergely Mar 02 '20 at 08:16
@Adarsh edit your main html file, where you have tag defined. change there `
` – Subin Sebastian Mar 02 '20 at 08:16
my template.html(index.html) is inside /src/template.html and inside that i can only see `
` maybe its dynamically creating the script – Adarsh Mar 02 '20 at 08:19
I'm using this boiler plate https://github.com/HashemKhalifa/webpack-react-boilerplate – Adarsh Mar 02 '20 at 08:21
@Adarsh Try changing webpack.common.js output.publicPath to '/'. You can also try to edit template.html inside src and add `` in the . – tudor.gergely Mar 02 '20 at 09:34

Routes gets undefined after refresh in react

1 Answers1