阵营路由器网址使用参数

Question

我使用做出反应路由器上的MeteorJS框架。

我想创建新的slu with /博客/：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> 
    ); 
    } 
} 

而且我的文章组件（用于显示我的/博客/：蛞蝓网址）：

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

我不了解我的网页无法显示的原因。如果我测试/博客/试验段塞，我看到父母路线：<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。如果你不给人以“精确”的属性，一切都以“/博客”相匹配。那之后会发生什么并不重要。