react-router-dom direct access to child path

Question

I have my main route in my main component set like that

<Main>
    <Switch>
        <Route exact path="/login" component={ LoginPage }/>
        <PrivateRoute path="/" component={ PrivatePages }/>
    </Switch>
</Main>

and inside PrivatePages the routes are set like this

<div>
    <Switch>
        <Route exact path="/users/:id" component={ UsersPage }/>
    </Switch>
</div>

when I'm accessing it like http://localhost:3000/users I see the right page (the UsersPage component) and when I click on a user it transfer to http://localhost:3000/users/someUserId (I'm doing it by using <Link>) and it works perfectly fine .. but when I refresh or trying to rich directly to a specific user's page I get a blank page which tries to load http://localhost:3000/users/main.js (I have no idea why it tried to load this file) I guess it's something from react-router-dom I tried to google it but I didn't find anything relevant ... can't put my finger hand on what I'm missing exactly.

thanks.

Answer 1

Ok, your page is blank because it can't download your main.js file which initializes your React app.

Corresponding to your dev server output-public-path (which is / by default) you should be able to download main.js with the following URL: http://localhost:3000/main.js, but you have http://localhost:3000/users/main.js. This is because you specified src='main.js' for <script> in your html file, which is a relative path. Server takes current URL path (http://localhost:3000/users/) and concatenates it with main.js. And we have http://localhost:3000/users/main.js.

You just need to set your <script> src attribute with an absolute path: src="/main.js".