1

我一直在使用如下代码在我的 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

以上生成的链接如预期：

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

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

/app/home/

然后生成的链接是错误的（注意双 / 后 home）：

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

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

当我建立一个链接时，我是否需要每次手动检查尾随 / 并在它存在时将其剥离？还是我可能缺少一些更好的最佳实践？

4

1 回答 1

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

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

于 2019-04-18T07:11:35.447 回答