路径在使用React Router DOM时会被修改

Question

我使用React -router-dom 5.2.0和React 17.0.1

我的应用URL是由一个域名和一个基本路径，应该是固定的，并保持不变。当在我的应用中使用react-router-dom时，基路径会被修改，整个路径也会改变。路由可以正常工作，但是导航栏上的URL会被路由破坏。

我的基础url是https://uat.highnoon.com/master/app/testplanweb，如果我点击<Link to="/about">，我得到https://uat.silose.com/about

我需要的路径保持不变的React路由器DOM，在上述情况下，它应该是https://uat.highnoon.com/master/app/testplanweb/about。URL是在我的gitlab管道中配置的，我需要在导航时保持域和基路径相同。

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;

Answer 1

尝试使用<BrowserRouter basename="/master/app/testplanweb">