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。

反应路由导致莫名其妙的行为

1 个答案: