Блог

Я использую react-router-dom 5.2.0 и React 17.0.1

URL-адрес моего приложения состоит из домена и базового пути, которые должны быть исправлены и оставаться неизменными. При использовании react-router-dom в моем приложении базовый путь изменяется, и путь полностью меняется. Маршрутизация работает нормально, но URL-адрес на панели навигации уничтожается маршрутизацией.

Мой базовый URL https://uat.highnoon.com/master/app/testplanweb -адрес, и если я нажму lt;Link to="/about"gt; на него, я получу https://uat.silose.com/about

Мне нужно, чтобы путь оставался неизменным с помощью React Router 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(  lt;BrowserRoutergt;  lt;App /gt;  lt;/BrowserRoutergt;,  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 (  lt;div className="App"gt;  lt;Nav/gt;  lt;Switchgt;  lt;Redirect from="/:url*(/ )" to={pathname.slice(0, -1)} /gt;  lt;Route exact path="/" component={Home} /gt;  lt;Route exact path="/search" component={List} /gt;  lt;Route exact path="/about" component={Version} /gt;  lt;/Switchgt;  lt;/divgt;  ); }  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 (  lt;nav class="nav nav-tabs justify-content-left p-3 mb-2 bg-dark text-white"gt;  lt;Link to="/"gt;  lt;a class="nav-link text-white bg-dark"gt;  Home  lt;/agt;  lt;/Linkgt;  lt;Link to="/search"gt;  lt;a class="nav-link text-white bg-dark"gt;  Search  lt;/agt;  lt;/Linkgt;  lt;Link to="/about"gt;  lt;a class="nav-link text-white bg-dark"gt;  About  lt;/agt;  lt;/Linkgt;  lt;/navgt;  ); }  export default Nav;   

Попробуйте использовать lt;BrowserRouter basename="/master/app/testplanweb"gt;