如何删除反应路由器 URL 中的尾部斜杠答案

【问题标题】：How to remove trailing slash in react-router URLs如何删除反应路由器 URL 中的尾部斜杠
【发布时间】：2017-01-31 01:14:55
【问题描述】：

我开始在我的应用程序中使用 react-router，我注意到当它在 URL (/url/) 的末尾有一个斜杠时它不起作用。我对其进行了更多搜索，阅读了所有文档和 react-router 问题并尝试使用<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 上使用斜杠，我决定做相反的事情，强迫没有它。

使用函数更新 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 在这种情况下不起作用？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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 是否为大然后 1 以及是否有尾部斜杠。
如果为真，我会在不带斜杠的情况下获取此 URL，并在不带斜杠的情况下执行 301 重定向到此页面。
否则，我跳转到下一个方法发送值。

【讨论】：

哦，我期待一些客户端解决方案。但这应该有效。但是如何维护应用程序的状态呢？
状态不参与这个过程。它是服务器端的。因此它不会干扰您的应用程序。您可以将其路由传递给 URL，而无需使用斜杠。这只是客户点击的情况。要在路由中进行这项工作，您可以使用“react-route”并制作如下内容：<Route path="/your-url-extension" component={ProfilePage} />，不使用斜杠。它不会导致您的应用程序出现任何错误。祝你好运！
感谢您的回复。你是对的。但就我而言，我使用的是声明性 url，并且 url 中可能没有提到这些 url（就像在 drobox 中一样，其中 url 是动态的，因为用户创建了一个新文件夹）。因此，在这种情况下它可能不起作用。但我想，服务器端是唯一好的解决方案。

【解决方案2】：

React Router v6 解决方案

删除TrailingSlash.tsx

import React from "react";
import {Navigate, useLocation} from "react-router-dom";

export const RemoveTrailingSlash = ({...rest}) => {
    const location = useLocation()

    // If the last character of the url is '/'
    if (location.pathname.match('/.*/$')) {
        return <Navigate replace {...rest} to={{
            pathname: location.pathname.replace(/\/+$/, ""),
            search: location.search
        }}/>
    } else return null
}

AppRoutes.tsx

const AppRoutes: React.FC = () => {
    return (
        <React.Fragment>
            <RemoveTrailingSlash/>
            <Routes>
            {/* All your routes go here */}
            </Routes>
        </React.Fragment>
    )
}

【讨论】：