我正在使用 react-router-dom 5.2.0 和 React 17.0.1
我的應用程式 URL 由一個域和一個應該固定并保持不變的基本路徑組成。在我的應用程式上使用 react-router-dom 時，基本路徑被修改并且路徑完全改變。路由作業正常，但導航欄上的 URL 被路由破壞了。
我的基本網址是https://uat.highnoon.com/master/app/testplanweb，如果我點擊一個<Link to="/about">我得到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(
<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;
uj5u.com熱心網友回復：
嘗試使用 <BrowserRouter basename="/master/app/testplanweb">
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/337779.html
標籤：javascript 反应 网址 反应路由器
上一篇：從不同的URL格式決議域名