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

IT技术 javascript reactjs react-router
2021-05-03 15:57:50

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

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

2个回答

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

   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. 如果为真，我将获得不带斜杠的 URL，并进行 301 重定向到此页面而不带斜杠。
  3. 否则，我会跳转到下一个方法来发送一个值。

React Router v6 解决方案

RemoveTrailingSlash.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>
    )
}
其它你可能感兴趣的问题
上一篇在react中显示纯 html 下一篇React 应用程序渲染 html 实体（例如 & 符号）作为转义符