У меня возникают трудности с относительными путями реагирования маршрутизатора. Базовый путь исчезнет с панели местоположений

Question

У меня есть веб-приложение, развернутое там, где root находится на пути /exist/apps/my-app/. У меня есть следующий код, реализованный для приложения. js:

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


function App() {
  return (
        <Router basename={process.env.PUBLIC_URL}>
            <Navbar bg="dark" variant="dark" fixed="top">
                <Navbar.Brand href="/"><img alt="" src="https://avatars3.githubusercontent.com/u/2393489?s=200&v=4" weign="40" height="40"/> My React Application</Navbar.Brand>
                <Nav className="mr-auto">
                    <Link to="/" className="nav-link">Home</Link>
                    <Link to="/features" className="nav-link">Features</Link>
                    <Link to="/pricing" className="nav-link">Pricing</Link>
                </Nav>
            </Navbar>
            <div className="full">
                <Switch>
                    <Route path="/features">
                        <h1>Features</h1>
                    </Route>
                    <Route path="/pricing">
                        <h1>Pricing</h1>
                    </Route>
                    <Route path="/">
                        <h1>Home</h1>
                    </Route>
                </Switch>
            </div>
        </Router>
  );
}

export default App;

Щелчок по навигационным ссылкам приводит к правильной маршрутизации, но /exist/apps/my-app исчезает из отображаемого URL-адреса. Как сохранить недостающую часть URL-адреса в строке адреса?

Answer 1

process.env.PUBLIC_URL содержал только точку.

Я нашел два решения.

Сначала был жесткий код basename={'/exist/apps/my-app'}.

Второй и лучший подход заключался в удалите basename все вместе и замените BrowserRouter на HashRouter.

В конце концов я нашел второй подход и получил дополнительное преимущество, заключающееся в возможности добавлять в закладки URL-адреса, содержащие маршрут.

Checkout https://github.com/lcahlander/my-app для примера веб-приложения eXist-db.