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

上面生成的链接符合预期：

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

但是，如果我加载此（略有不同）的路径（请注意末尾的/）：

/app/home/

然后生成的链接是错误的（请注意，在首页后加双/）：

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

换句话说，问题在于有时存在尾随/，有时没有。

建立链接时，是否需要每次都手动检查尾随/并删除是否存在？还是我可能会缺少一些更好的最佳实践？

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 Router：建立链接时如何处理match.url中的尾随/？

1 个答案: