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移至顶部，并在其上添加精确值。摆脱花括号...

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

Answer 2

我最终使用了history.replaceState（''，“状态标题”，“根路径”）;

在我的索引部分。

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删除尾随/根路由

4 个答案: