我对反应路由器的相对路径有困难。基本路径从位置栏中消失
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 应用程序。
【讨论】:
以上是关于我对反应路由器的相对路径有困难。基本路径从位置栏中消失的主要内容,如果未能解决你的问题,请参考以下文章