Adding Base URL in react.js project is not working

Question

I want to add the base URL to my react.js project. However I had tried couple of methods that did not work.

For example, if my project url is :

http://www.myproject.com/

It should appear in address bar as :

http://www.myproject.com/app
http://www.myproject.com/app/home  // If home page 
http://www.myproject.com/app/about // If about page

Below is my project code.

index.js

import "./index.css"
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from './context/AuthProvider';
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import App from './App';

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
);

App.js

import Layout from './components/authController/Layout'
import Login from './components/authController/Login';
import Home from './components/authController/Home'
import AllUser from './components/authController/AllUser'
import RequireAuth from './components/authController/RequireAuth';
import PersistLogin from './components/authController/PersistLogin';
import Logout from './components/authController/Logout';
import Missing from './Missing';
import {Routes, Route, Navigate} from 'react-router-dom'


function App() {
  return (
    <div>
    <Navbar/>
    <Routes>
      <Route path="/" element={<Layout />}>
          {/* public routes */}
          <Route path="login" element={<Login />} />
          <Route path="loggedOut" element={<Logout />} />
          
        {/* we want to protect these routes */}
        <Route element={<PersistLogin />}>
          <Route path="/" element={<Navigate to="/home" replace />} />
            <Route path="home" element={<Home/>} />

            <Route element={<RequireAuth/>}>
              <Route path="alluser" element={<AllUser />} />
            </Route>

        </Route>
          {/* catch all */}
          <Route path="*" element={<Missing />} />
      </Route>
  </Routes>
  </div>
  );
}

export default App;

What I had tried?

As I referred in stackoverflow and also many other websites, integrated below methods.

Added base url inside package.json file
"homepage": "/app",
Tried to pass the tag <base href="http://myapp.com/app"> within <head> tag in public/index.html page
Passed the base url within BrowserRouter in index.js <BrowserRouter basename="app"> </BrowserRouter>

I am sure I am missing something, it would be great learning if someone help on this or give insights on this.

Thank you

Is your react app actually deployed to and served from a "/app" directory on the server? The basename prop is a way to prefix routes/links automatically to match the directory where the app is served from. — Drew Reese
– Drew Reese, Commented Aug 1, 2022 at 18:01
i think the best way is to redirect users from / to /app — Rawand
– Rawand, Commented Aug 2, 2022 at 1:16

Mustapha Ghannouchi · Accepted Answer · 2022-08-01 17:46:30Z

2

I don't know the correct answer to this , but I believe that you can redirect the route "/" to "/app" . I hope this can help you

answered Aug 1, 2022 at 17:46

Mustapha Ghannouchi

3561 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RAJENDRA H · Accepted Answer · 2022-08-02 06:14:30Z

0

Solution:-

Hello everyone.

I got the solution for my query. I have modified the index.js file like below

 <Routes>
     <Route path="app/*" element={<App />} />
     <Route path="/*" element={<Navigate to="app/home" replace />} />
 </Routes>

answered Aug 2, 2022 at 6:14

RAJENDRA H

833 silver badges10 bronze badges

Collectives™ on Stack Overflow

Adding Base URL in react.js project is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related