React router and disappearing base route

Question

I wrote a React app in which I'm using react-router-dom and Link and Route pairs like

<Link to="/subpath"> <Route path="/subpath"> or

<Link to="/basepath/subpath"> <Route path="/basepath/subpath">

In development links and routes with and without /basepath work fine. However, after npm run build, only the first load of the base URL works. Anything I do on the app causes the basepath to disappear from the URL. For example if I click a

<Link to="/subpath"> or

<Link to="/basepath/subpath">, which both should take me to

https://domain/basepath/subpath, I end up in

https://domain/subpath

The app kind of keeps working, but images cannot be found no more and for example the page refreshes naturally fail.

I have tried everything I've found from the internet that might affect this, like adding basename to the BrowserRouter, set the homepage to package.json, build with PUBLIC_URL, and add basepath to every Link and Route tag. (I even tried giving the basepath in Link tag twice, but both basepaths disappeared from the URL. :-) )

How can I get the React Router to keep the basepath in the URL?

EDIT: Sample link-route pair:

<Link to={"/somepath/path/" + someId}>
  <img  src={"https://domain/somepath/" + image + ".jpg"} />
</Link>

<Route path="/somepath/path/:someId">
  <ShowImage />
</Route>

The link and route paths can also be without /somepath, ie. "/path/...", makes no difference in development, but neither work in production. Clicking the link should make the browser go to https://domain/somepath/path/someId, but it goes to https://domain/path/someId The app and routing seems to work sort of fine, as it next shows ShowImage. However, at the same time the image source apparently becomes https://domain/image.jpg as ShowImage cannot find the same image from the same source address.

EDIT 2:

The router structure.

<Router>
  <Switch>
    <Route path="/somepath/:someId">
      <ShowImage />
    </Route>
    <Route path="/">
      <ShowBase />
    </Route>
  </Switch>
</Router>

ShowBase and ShowImage code to display an image.

<img src={"https://domain/basepath/" + image + ".jpg"} />

ShowImage history.push (with or without /basepath) and button handling.

function handleClick(event) {
  history.push('/');
}
<button onClick={handleClick}>Back</button>

So you are facing this issue only in production. Everything is working fine at local development machine. Am I right? Are you using `history.push` anywhere in your application? Can you show your **full** `Route` setup in the question or in a sandbox? And all the methods you are using to change routes, using `` and/or `history.push`. — Ajeet Shah, Jun 08 '20 at 20:06
Yes, everything works fine in development. And yes, I'm also using ```history.push``` in many places, with same routes as Links. You think that the history.pushes cause this? I could rewrite the code without a single history.push, but that would have a slight adverse effect on how the app works. Not too bad, though. — tim, Jun 09 '20 at 08:53
`history.push('/hello')` takes from `localhost:3000/some/url` to `localhost:3000/hello` while `history.push('hello')` takes from `localhost:3000/some/url` to `localhost:3000/some/hello`. Note the "hello" & "/hello" in "push". As I mentioned that [here](https://stackoverflow.com/a/62110309/2873538). But your issue seems different as it works on dev but not on prod. Also, make sure you are doing `history.push` with a `/` (leading slash). I will try to reproduce your problem. — Ajeet Shah, Jun 09 '20 at 09:28
Thank you. I use a leading slash in every Link and history.push. — tim, Jun 09 '20 at 11:29
@tim If you have found the solution to your problem then you should post it in the answers section. You should not edit your question or add [SOLVED] or the like. — eyllanesc, Jun 13 '20 at 18:24

score 1 · Answer 1 · answered Jun 15 '20 at 04:15

1

I think I figured it out. A link to the build directory had disappeared and this caused the problems. After recreating the link, it was easy to get everything to work as expected. Sorry it took so long.

answered Jun 15 '20 at 04:15

tim

41
4

score 0 · Answer 2 · answered Jun 07 '20 at 21:35

0

Use Redirect

If I get your problem, you try to put an image id in the url and go to the "basepath" with the image id. (and in the component get the params and display the image)

you can use redirect like this

<Redirect exact from="/:id" to="/basepath/:id" />

answered Jun 07 '20 at 21:35

Omer

3,232
1
19
19

Thanks, Omer, I tried it and unfortunately it did not help. However, it helped me to realize that I better clarify this: the Router actually sees and uses the /basepath correctly all the time, it just drops from the browser URL. – tim Jun 08 '20 at 08:19
Show me the full code, maybe you have a conflict between two Url addresses so one part is gone – Omer Jun 08 '20 at 10:09

React router and disappearing base route

2 Answers2

Use Redirect