如何使用 react-router 删除根路由上的尾随 /

Question

我有几条路线：

 www.example.com/rootRoute/flags
 www.example.com/rootRoute/test
 www.example.com/rootRoute/derp

对于路线主页，我希望我的路线是：

 www.example.com/rootRoute

但是 react-router 在末尾强制使用 / 所以我的根路由是：

 www.example.com/rootRoute/

知道如何解决这个问题吗？

 "react-router": "^4.3.1",
 "react-router-dom": "^4.3.1",

我已经在我的开关中设置了路径并路由到所需的路径，但是 / 总是附加在地址栏中。

 <Switch>
  <Route path={'/rootRoute/flags'} component={FeatureFlagsPage} />
  <Route path={'/rootRoute/test'} component={DerpComponent} />
  <Route path={'/rootRoute'} component={TestComponent} />

我希望根路由的末尾没有/。

Answer 1

一些小改动：

将 /rootRoute 移到顶部并向其添加 exact。去掉花括号...

<Switch>
  <Route exact path='/rootRoute' component={TestComponent} />
  <Route path='/rootRoute/flags' component={FeatureFlagsPage} />
  <Route path='/rootRoute/test' component={DerpComponent} />
</Switch>

Answer 2

我最终使用了 history.replaceState('', 'State Title', 'Root Path');

在我的索引组件中。

Answer 3

您可以向路由器添加一个基本名称，如下所示：

<Router basename='/rootRoute'>
  <Switch>
    <Route exact path='/' component={ TestComponent }/>
    <Route path='/flags' component={ FeatureFlagsPage }/>
    <Route path='/test' component={ DerpComponent }/>
  </Switch>
</Router>

Answer 4

我能够通过添加摆脱 URL 中的尾部斜线：

  <Switch>

    // put this rule before your Routes
    <Redirect from="/:url*(/+)" to={window.location.pathname.slice(0, -1)} />

    // and your Routes go here...

  </Switch>

如何使用 react-router 删除根路由上的尾随 /

How to remove trailing / on root route with react-router

reactjs

react-router-v4