Can't redirect the path "*" to the basepath

[ithilbor]

Hi I couldn't make to redirect the user to the base path if it's not written by the user, this is my code:

Into the index.tsx file:

      <BrowserRouter basename="/myapp">
          <Routes>
             <Route path="*" element={<MyApp />} />
          </Routes>
      </BrowserRouter>

Into the MyApp.tsx file:

    <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<ProtectedRoutes />} >
          <Route path="/home" element={<Home />} />
          <Route path="/test" element={<Test />} />
          <Route path="/help" element={<About />} />
        </Route>
        <Route path="/*" element={<DefaultRoute />} />
    </Routes>

The default route is simply checking that if the user is logged and types a wrong route it'll bring him to the home if not logged to the login page

Also in the package.json I've setted the: "homepage":"/myapp"

[ithilbor]

In other words if I remove the /myapp and type directly /home or leve it blank it will not redirect the user to the base path + page name

[shrijan00003]

@IronCub3 As per my understanding, since you are building your application for the /myapp path in the server, the client-side routing that you have written doesn't work on the / path.

The base path is basically used if you want to deploy your application in the /myapp location with client-side routing. For example, example.com/myapp in this case, example.com might have different applications running on it. Since example.com don't run your client-side routing, it can't redirect the user to your default route.

[ithilbor]

You're right I forgot to specify that the pages are rendered by the client side in the backend(server) I do only the work in order communicate with a DB and ensure that the communications between clients and the backend are secure. Therefore as you said the routing is done by the client side and my app run on a specific port so I was trying to understand if by using the base path /myapp I can also be able to redirect all the request that starts with something different than /myapp to for example /myapp/home if the user has logged in.
To simplify the explanation the url of my app is: https://localhost:port but the base path is https://localhost:port/myapp is there a way to redirect all the request for https://localhost:port to https://localhost:port/myapp using react-router?

Thanks @shrijan00003

[shrijan00003]

@IronCub3 Here is my answer with the following assumptions.

1. You are running different applications on https://localhost:port, for example for authentication only. Might be React application or any other javascript application.
2. You are running react project with react-router on https://localhost:port/myapp
3. You want to navigate the user from https://localhost:port, to https://localhost:port/myapp if a user is authenticated.

Here is the possible solution.

1. On https://localhost:port, you can save the authentication token on local storage and session storage and redirect the user to https://localhost:port/myapp. If you are using react-router you can use or else simply you can redirect with window.location.assign(https://localhost:port/myapp) in Javascript applications.
2. Since you are using the same domain, you can get the information from the local storage or Session Storage.
3. Now you can validate those tokens on the /myapp application if the token is still valid then you can continue otherwise redirect back to the / application or login page you have created. For redirection, you can use react-router or a simple javascript window method again.

Thanks!

[ithilbor]

Thanks again @shrijan00003 I will try this solution for sure and let you know if it will fix my problem. Thanks for your time and explanation!

[ithilbor]

@shrijan00003 I've tested the method you've suggested but I've found a better way of doing this by using only react router dom without the basepath="/myapp" option in the <BrowserRouter> component. The solution was to wrap everything with another <Route> component specifying only the path in order to have a common url for a number of pages. I will update the code here in two/three hours.
Thanks again!

[shrijan00003]

@IronCub3 Great you found the solution. The base path should be used only if you are going to host your application in some other path than root in the server like something.com/app where something.com might be any other applications (doesn't need to be javascript project )

[ithilbor]

Yes, to get the same result of the basepath what I've done is this:

Into the index.tsx file:

      <BrowserRouter>
          <Routes>
             <Route path="*" element={<MyApp />} />
          </Routes>
      </BrowserRouter>

Into the MyApp.tsx file:

      <Routes>
        <Route path={urlPrefix}>
          <Route element={<ProtectedRoutes />} >
            <Route path="/home" element={<Home />} />
            <Route path="/test" element={<Test />} />
            <Route path="/help" element={<About />} />
          </Route>
        </Route>
       <Route path="*" element={<DefaultRoute />} />
     </Routes>

Where the urlPrefix was my initial basepath