我对反应路由器的相对路径有困难。基本路径从位置栏中消失

Posted

技术标签:

【中文标题】我对反应路由器的相对路径有困难。基本路径从位置栏中消失【英文标题】:I am having difficulties with react router relative paths. The base path disappears from the Location bar 【发布时间】:2020-11-27 01:14:09 【问题描述】:

我有一个 web 应用程序,它部署在根目录位于 /exist/apps/my-app/ 的路径中。我为 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  src="https://avatars3.githubusercontent.com/u/2393489?s=200&v=4" weign="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 的缺失部分?

【问题讨论】:

【参考方案1】:

process.env.PUBLIC_URL 仅包含句点。

我找到了两个解决方案。

首先是硬编码basename='/exist/apps/my-app'

第二种更好的方法是把basename全部去掉,把BrowserRouter改成HashRouter

我最终找到了第二种方法,并且能够为包含路由的 URL 添加书签。

签出https://github.com/lcahlander/my-app 以获取示例 eXist-db Web 应用程序。

【讨论】:

以上是关于我对反应路由器的相对路径有困难。基本路径从位置栏中消失的主要内容,如果未能解决你的问题,请参考以下文章

检测反应路由器中的先前路径?

绝对路径和相对路径

基础命令

基础命令

Vuejs,使用相对路径构建的困难

为啥反应路由器不工作。当我改变路径?