如何删除反应路由器 URL 中的尾部斜杠 [英] How to remove trailing slash in react-router URLs

问题描述

我开始在我的应用程序中使用 react-router，我注意到当它在 URL 末尾有一个斜杠 (/url/) 时它不起作用.我搜索了更多相关信息，阅读了所有文档和 react-router 问题，并尝试使用 <Redirect from='/*/' to="/*"/>，但这不是很好的解决方案，因为它也不起作用.因此，阅读更多内容后，我发现了在 URL 末尾插入 /? 的建议，但它仍然无效.

I start to use react-router in my application and I am noting that when it has a trailing slash at end of URL (/url/) it does not work. I searched more about it, read all documentation and react-router issues and tried to use <Redirect from='/*/' to="/*" />, however it was not a good solution, cause it did not work too. So, reading more I found out a suggestion to insert /?at end of URL, but it still not worked.

routes.js 的代码:

The code of 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 的代码:

The code of index.js:

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

搜索更多，我发现一个人做了一个函数来强制在 URL 中添加斜杠，我决定做相反的事情，强迫没有它.

Searching more, I found a guy who made a function to force trailing slash at URLs and I resolved to make the opposite of that, forcing to not have it.

使用无尾随斜杠函数更新routes.js代码:

Update routes.js code with function No trailing slash function:

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 在这种情况下不起作用?

And again this did not work! I need to make this URLs more friendly as possible and I would like that URLs do not have any trailing slash at the end. Any suggestion how can I make this? And why Redirect did not work in this case?

推荐答案

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

I found a good option to make this redirect. Below is the code which I am using:

   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()
      }
    });

解释基本就是这样:

1. 在此函数中，我验证 URL 是否为大 URL 以及它是否具有尾部斜杠.
2. 如果为 true，我将获得不带斜杠的 URL，并进行 301 重定向到此页面而不带斜杠.
3. 否则，我会跳转到下一个方法来发送值.

这篇关于如何删除反应路由器 URL 中的尾部斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！