如何在应用程序级别设置react-router的基本url？

Question

我有一个使用 create-react-app 创建的应用程序，我想将其安装在我网站上的子目录中。推荐的方法是添加

process.env.PUBLIC_URL

作为 baseurl。即：

<Route exact path={`${process.env.PUBLIC_URL}/signin`} component={SigninPage}/>

现在有没有一种方法可以在应用程序级别设置它，这样我就不必在每个路由或链接或导航链接上重复这段代码？

谢谢！

Answer 1

您可以将其设置为

basename

上的

Router

，以下是React路由器文档的链接：

basename

中的

BrowserRouter

和

basename

中的

HashRouter

。它看起来像这样：

<Router basename={process.env.PUBLIC_URL}>
</Router>

Answer 2

使用 React Router v6，建议对 Web 项目使用

createBrowserRouter

。

将选项对象作为第二个参数传递给

createBrowserRouter

以配置

basename

。

import * as ReactDOM from 'react-dom';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
    /* routes... */
], { basename: process.env.PUBLIC_URL });

ReactDOM.createRoot(document.getElementById('root')).render(
    <RouterProvider router={router} />
);