使用参数

Question

我在MeteorJS框架上使用React Router。

我想用 / blog /：slug 创建新的slug，但没有结果。我的PostItem组件：

class PostsListItem extends Component {

  render() {
    return (
      <li className={this.props.post.draft ? 'is-drafted' : ''}>
        <Link to={`/blog/${this.props.post.slug}`}>{this.props.post.title}</Link>
        <p>{this.props.post.description}</p>
      </li>
    );
  }

}

我的路线：

class Layout extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Header />
          <main className="l-main">
            <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/blog' component={Blog} />
              <Route path='/blog/:slug' component={Article} />
              <Route path='/about' component={About} />
              <Route path='/contact' component={Contact} />
              <Route component={NotFound} />
            </Switch>
          </main>
          <Footer />
        </div>
      </Router>
    );
  }
}

我的文章组件（用于显示我的 / blog /：slug 网址）：

function Article(props) {
  return <h1>{props.match.params.name}</h1>
}

我不明白为什么我的页面不显示。如果我测试/ blog / test-slug，我会看到父路线：<Route path='/blog' component={Blog} />

有人有任何想法吗？

谢谢社区！

Answer 1

你的问题是你这样做：

<Route path='/blog' component={Blog} />
<Route path='/blog/:slug' component={Article} />

而不是：

<Route exact path='/blog' component={Blog} />
<Route path='/blog/:slug' component={Article} />

路由器正在搜索第一个匹配的URL。如果您没有提供“确切”属性，那么“/ blog”的所有内容都会匹配。在那之后发生了什么并不重要。