javascript - 使用 React Router DOM 时路径被修改

问题描述

我正在使用 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;

标签： javascriptreactjsurlreact-router

javascript - 使用 React Router DOM 时路径被修改

问题描述

解决方案

推荐阅读