reactjs - 如何正确处理react-router中的子路由(路由有效，但URL随着每次点击而增长)

Question

我正在学习如何使用react-router。我的路由工作正常，这意味着当我单击相应的链接时，我可以获得所需的 View 。我有一个具有嵌套/子路由的 View 。单击这些子链接确实会将我带到相应的 View ，但它不会按照我的意愿更新浏览器的 URL。

我从 View 的 IndexRoute 开始。浏览器的 URL 开始看起来像这样，这就是我想要的:

http://localhost:3000/administration

当我单击不同的子路由时，它会不断将子路由的路径附加到 URL 上，这样在单击几次后，浏览器的 URL 最终会看起来像这样:

http://localhost:3000/administration/administration/administration/administration/administration/administration/administration/administration/company-goals

当我想要浏览器的 URL 是这样的时:

http://localhost:3000/administration/company-goals

我的路由结构设置如下:

<Route path="/" component={HomePage}>
<IndexRoute component={HomeView} />
<Route path="budgets" component={BudgetView} />
<Route path="administration" component={adminViews.Administration}>
<IndexRoute component={adminViews.Home} />
<Route path="department-budgets" component={adminViews.DepartmentBudgets} />
<Route path="price-list" component={adminViews.PriceList} />
<Route path="company-goals" component={adminViews.CompanyGoals} />
</Route>
</Route>

管理 View 有一个选项卡式导航，其中每个管理 View 的子路由都有一个选项卡。

当用户单击具有如下功能的选项卡时，我正在更改路线:

selectedTab( tab ) {
const menu = menuItems.find((item) => {
return item.payload === tab.value;
});
history.pushState(null, menu.uriPath);
}

每个路由的 uriPath 定义如下:

menuItems = [
{
payload : '1',
text : 'Home',
uriPath : 'administration'
},
{
payload : '2',
text : 'Department Budgets',
uriPath : 'administration/department-budgets'
},
{
payload : '3',
text : 'Price List',
uriPath : 'administration/price-list'
},
{
payload : '4',
text : 'Company Goals',
uriPath : 'administration/company-goals'
}
];

任何帮助将不胜感激。我觉得我错过了一些非常基本的东西，但我无法确定我做错了什么。

谢谢!

Answer 1

将 / 放在 uriPath 的开头。