我可以设置React Router中的基本路由吗？

Question

假设我的应用程序基本url是example.com/app，那么在react-router中是否可以设置一个基本路由，以便不必编写所有路由，而是将其视为基本路径？

答案:

假设我的应用程序基本url是example.com/app, 是否可以在react-router中设置一个基本路由，使得所有路由都可以相对于该路径？

/app/a
/app/b
/app/c

我可以将它们简单地指定为

a
b
c

我尝试了在文档中找到的下面的例子，但它不起作用（页面什么也不显示）。可能是因为我正在使用react-router@3.0.0-alpha.1，或者我做错了什么。

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/app'
})

const Root = ({store}) => (
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={App}>
                ...
            </Route>
        </Router>
    </Provider>
)

- galki

---

你解决了这个问题吗？如果是，请发布一个答案。 - Learner

@学习者 没有，我放弃了，并开始完整地输入路由，实际上发现这样更清晰。 - galki

真的吗？这个没有简单的解决方案吗？我已经搜索并尝试了一些想法，但都没有成功（但我是新手）。 - Ashley Aitken

Answer 1

使用最新的React Router（v4），您可以轻松实现此操作。

<BrowserRouter basename="/calendar">
  <Link to="/today"/> // renders <a href="/calendar/today">
</BrowserRouter>

- galki

---

有没有办法使用动态路径字段实现这个功能？比如 /calendar/:year/:month/:day/event，其中它可以是 /calendar/11/4/21/event 这样的形式。 - Jeremy

为什么不将“:年 / :月 / :日 / 事件”部分放在链接中呢？ - galki

这里需要指出的是，文档似乎在正确使用<BrowserRouter>标签方面存在错误。如文档中所示的自闭合标签将没有任何效果。您需要将<BrowserRouter>标签包装在所有<Link>和其他路由标签周围。示例应该为：<BrowserRouter basename="/calendar"><Link to="/today"/><Link to="/tomorrow"/> ... </BrowserRouter> - Jamie McLaughlin

很遗憾，这似乎不再起作用了。 - Matteo

@Madeo 我使用和你一样的方法，但我发现带有修剪路径值的 Route 组件将导航到 404 路由。 - liuliang

Answer 2

如果你想使用<Router />，那么你可以访问history对象，在js中通过history.push('/my-path')方法直接更改页面。但是你会发现BrowserRouter没有可用的history属性，而Router没有basename属性。

解决方案如下：

const App: React.FC = () => {
  // do not put a slash at the end of the basename value.
  const history = createBrowserHistory({ basename: '/your-base-name' });

  return <Router history={history}>
           ...
         </Router>;
}

所有位置的基础URL。如果您的应用程序是从服务器上的子目录提供服务的，则需要将其设置为子目录。正确格式的基本名称应具有前导斜杠，但没有尾随斜杠。

https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

- Ambroise Rabier

Answer 3

使用React Router v6时，建议在Web项目中使用createBrowserRouter，因为它可以与数据API一起使用。

将选项对象作为第二个参数传递给createBrowserRouter以配置basename。

例如：

import * as ReactDOM from 'react-dom';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
const router = createBrowserRouter([
    { path: '/', element: <HomePage /> }
    /* other routes... */
], { basename: '/app' });

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

- Unmitigated