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 ie 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

Answer 1

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