陣營路由器網址使用參數

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。如果你不給人以「精確」的屬性，一切都以「/博客」相匹配。那之後會發生什麼並不重要。