React 路由器：如何在构建链接时处理 match.url 中的尾随 /？

Question

我一直在使用如下代码在我的 React 应用程序中构建链接（使用 react-router-dom 4.3.1）：

const { match } = this.props;
...
pages.map(page =>
    <Link to={match.url+'/'+page.id()+'/info'}>
        Go to info page for {page.title()}
    </Link>)

因为这似乎是推荐的做法（例如，参见 ${match.url}/components https://reacttraining.com/react-router/web/guides/quick-start/example-nested-routing）。

我遇到的问题：

如果我在以下路径：

/app/home

上面生成的link符合预期：

/app/home/1/info
/app/home/2/info
/app/home/3/info
等等

但是如果我加载这个（略有不同的）路径（注意尾随 /）：

/app/home/

那么生成的 link 是错误的（注意 home 后面的双/）：

/app/home//1/信息
/app/home//2/信息
/app/home//3/信息
等等

换句话说，问题是有时有尾随 / 有时没有。

当我构建 link 时，是否需要每次手动检查尾随 / 并在存在时将其删除？还是我可能缺少一些更好的最佳实践？

Answer 1

丢弃用户提供的尾随 /：

const {match} = this.props;
let len = match.url.length;
match.url = (match.url[len - 1] === "/") ? match.url.substring(0, len-1) : match.url;

...

pages.map(page =>
<Link to={match.url+'/'+page.id()+'/info'}>
    Go to info page for {page.title()}
</Link>)

或者，如果它也丢失了，您可以添加：

match.url = (match.url[len - 1] === "/") ? match.url : match.url + "/";

pages....
    <Link to={match.url + page.id() ....}
...

我认为添加一个缺失的比丢弃一个现有的更容易。

React 路由器：如何在构建链接时处理 match.url 中的尾随 /？

React router: How to handle trailing / in match.url when building Links?

reactjs

react-router

react-routing

react-router-v4

react-router-dom