如何在react-router中正确处理子路由(路由工作,但每次点击都会增加URL)

Question

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

我从视图的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>

"管理"视图具有选项卡式导航,其中包含每个"管理"视图的子路径的选项卡.

当用户单击具有如下函数的选项卡时,我正在更改路径:

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的开头.