Question

我开始在我的应用程序中使用react-router，我注意到当它在URL（/url/）末尾有一个尾部斜杠时，它不起作用。我搜索了更多关于它，阅读所有文档和反应路由器问题，并尝试使用<Redirect from='/*/' to="/*" />，但它不是一个好的解决方案，因为它也没有工作。所以，阅读更多我发现在URL末尾插入/?的建议，但它仍然没有用。

routes.js的代码：

export default (
    <Route path="/" component={App}>
        <IndexRoute component={ProfileFillComponents} />
        <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} />
        <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} />
    </Route>
)

index.js的代码：

render((<Router history={browserHistory} routes={routes} />), document.getElementById('root'));

搜索更多内容时，我找到了一个能够强制在URL上使用斜杠的函数的人，我决定反过来做出相反的操作，强迫它没有。

使用函数No trash斜杠函数更新routes.js代码：

export default (
    <Route onEnter={forceTrailingSlash} onChange={forceTrailingSlashOnChange}>
        <Route path="/" component={App}>
            <IndexRoute component={ProfileFillComponents} />
            <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} />
            <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} />
        </Route>
    </Route>
)

function forceNoTrailingSlash(nextState, replace) {
  const path = nextState.location.pathname;
  if (path.slice(-1) === '/') {
    replace({
      ...nextState.location,
      pathname: path.slice(1,path.lastIndexOf('/')-1)
    });
  }
}    

function forceNoTrailingSlashOnChange(prevState, nextState, replace) {
  forceNoTrailingSlash(nextState, replace);
}

再次这不起作用！我需要尽可能使这些URL更友好，我希望这些URL最后没有任何尾部斜杠。有什么建议我怎么能这样做？为什么Redirect在这种情况下不起作用？

Answer 1

我找到了一个很好的选择来进行此重定向。以下是我正在使用的代码：

   app.use(function(req, res, next) {
      if (req.path.length > 1 && /\/$/.test(req.path)) {
        var query = req.url.slice(req.path.length)
        res.redirect(301, req.path.slice(0, -1) + query)
      } else {
        next()
      }
    });

解释基本上是：

在此函数中，我验证URL是否为grand，如果它有一个尾部斜杠。
如果为true，我会在没有尾部斜杠的情况下获取此URL并将301重定向到此页面而不使用尾部斜杠。
否则，我跳转到下一个方法发送一个值。

如何删除react-router URL中的尾部斜杠

1 个答案: