React 路由导致莫名其妙的行为

Question

下面是我的一条路线

{
     path: "/news/:id",
     component: NewsDetail,
},

下面是NewsDetail的渲染代码

render() {
        console.log("id: ", this.props.match);
        if (isNaN(this.props.match.params.id)) {
            return <div/>;
        }
        return (
                <main className="news-detail">
                    <NewsInDetailSection news={initialsData.newsItems[this.props.match.params.id]} />
                </main>
                );
    }

console.log 的输出是：

    id:  { path: '/news/:id',
  url: '/news/1529825022511',
  isExact: true,
  params: { id: '1529825022511' } }

   id:  { path: '/news/:id',
  url: '/news/vendors~app.bundle.js',
  isExact: true,
  params: { id: 'vendors~app.bundle.js' } }

  id:  { path: '/news/:id',
  url: '/news/app.bundle.js',
  isExact: true,
  params: { id: 'app.bundle.js' } }

第一个日志很好，但我不明白为什么 app.bundle.js 越来越 放在这里。为了解决这个问题，我添加了一个使用 if 条件的补丁 在我的代码中，但这不是正确的解决方法，它只是一种解决方法。

我知道我写的问题很糟糕，但我是新来的反应和 我不知道如何解释这个问题。任何回应都是 赞赏。

Answer 1

您对id 参数没有任何限制。它可以是任何东西。因此它也是app.bundle.js。如果 URL 与 app.bundle.js 匹配，我不完全理解问题是什么，因为这是一个有效的 URL（从技术上讲。逻辑上它不是真的）。假设您只想匹配数字，

如果您的 news_id 只有数字，则需要添加 regex 以仅匹配数字。请参阅this SO question。