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 : It should appear in address bar as : Below is my project code. index.js App.js What I had tried? As I referred in stackoverflow and also many other websites, integrated

Adding Base URL in react.js project is not working

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/

JavaScript
​x
 
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

JavaScript
 
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>
);

JavaScript
 
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;

JavaScript
 
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

Answer

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

Advertisement

Answer