Path gets modified when using React Router DOM-CodePudding

I'm using react-router-dom 5.2.0 and React 17.0.1

My app URL is composed of a domain and a base path that should be fixed and remain unchanged. When using react-router-dom on my app, the base path is modified and the path changes entirely. The routing works fine but the URL on the navigation bar gets massacred by the routing.

My base url is https://uat.highnoon.com/master/app/testplanweb and if I click a <Link to="/about"> I get https://uat.silose.com/about

I would need the path to remain unchanged by React Router DOM and in the above case it should be https://uat.highnoon.com/master/app/testplanweb/about. The URL is configured in my gitlab pipeline and I need the domain and the basepath to remain the same while navigating.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter>
      <App />
    </BrowserRouter>,
  document.getElementById("root")
);

reportWebVitals();

App.js

import React from "react";
import { useLocation, Switch, Route, Redirect } from "react-router-dom";
import "./App.css";
import Version from './components/Version';
import List from "./components/List";
import { Home } from "./components/Home"
import Nav from "./components/Nav";

function App() {
  const { pathname } = useLocation();
  return (
      <div className="App">
        <Nav/>
        <Switch>
          <Redirect from="/:url*(/ )" to={pathname.slice(0, -1)} />
          <Route exact path="/" component={Home} />
          <Route exact path="/search" component={List} />
          <Route exact path="/about" component={Version} />
        </Switch>
      </div>
  );
}

export default App;

Nav.js

import React from 'react';
import './../App.css';
import { Link } from 'react-router-dom';
import "bootstrap/dist/css/bootstrap.min.css";

function Nav() {
    return (
            <nav class="nav nav-tabs justify-content-left p-3 mb-2 bg-dark text-white">
                <Link to="/">
                        <a class="nav-link text-white bg-dark">
                            Home
                        </a>
                </Link>
                <Link to="/search">
                        <a class="nav-link text-white bg-dark">
                            Search
                        </a>
                </Link>
                <Link to="/about">
                        <a class="nav-link text-white bg-dark">
                            About
                        </a>
                </Link>
            </nav>
    );
}

export default Nav;

CodePudding user response：

Try to use <BrowserRouter basename="/master/app/testplanweb">