Question

我试图模仿反应路由器示例部分中指定的结构，尤其是具有“huge-apps”的结构。我的文件夹结构如下所示。

project
--src
  --huge-apps
    --app.js
    --index.html
--index.html
--webpack.config.js

这仅与反应路由器示例部分内部结构的一个级别不同，如下所示：

examples
--huge-apps
  --app.js
  --index.html
--index.html
--webpack.config.js

我的问题是我必须在我的路由器配置中将我的根路径指定为“/ src / huge-apps”，位于huge-apps文件夹下的app.js中。但是，反应路由器示例部分的根路径仅在huge-apps部分下的app.js文件中指定为“/”。

有人可以帮助我了解如何实现类似的设置，我的“huge-apps”部分下的根路径也可以指定为“/”？

我似乎无法弄清楚我在这里错过了什么。我的路由器版本为2.0.0-rc5

由于

Answer 1

示例使用的是基本名称。使用基本名称（对于浏览器历史记录项目，它们对于哈希历史记录完全没有必要）来指定用于查找项目的根目录。然后，所有路径名都将被视为以基本名称开头。

您可以decorating your history为项目添加基本名称。例如，如果您的网址应以/huge-apps开头：

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

const history = useRouterHistory(createHistory)({
  basename: '/huge-apps'
})

现在，当您导航到应用程序内部的/huge-apps时，它会将该位置视为/。同样，在您的应用程序中，URL /huge-apps/foobar将被视为/foobar。

当然，您必须设置服务器，以便在用户请求任何/huge-apps/*网址时，它会为您的index.html文件提供服务。

顺便说一句，您应该将您的React Router版本升级到2.8.1或3.0.0。版本3与2相同，但删除了任何已弃用的版本1代码。

路由器路由器示例部分的路由如何工作？

1 个答案: