React Router URL mit Parametern

Question

Ich benutze React Router auf einem MeteorJS-Framework.

Ich möchte neue Slug mit /blog/erstellen: Slug, aber kein Ergebnis. Meine PostItem Komponente:

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> 
    ); 
    } 

} 

Mein Routing:

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> 
    ); 
    } 
} 

Und meine Artikel Komponenten (für die Anzeige meines /Blog /: Slug url):

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

mich nicht verstehe, warum meine Seite nicht angezeigt wird. Wenn ich test/blog/test-slug, sehe ich die übergeordnete Route: <Route path='/blog' component={Blog} />

Wer hat eine Idee?

Danke Gemeinde!

Answer 1

Ihr Problem ist, dass Sie dies tun:

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

statt dessen:

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

Der Router für das erste passende URL sucht. Und wenn Sie nicht das Attribut "exact" angeben, stimmt alles mit "/ blog" überein. Es spielt keine Rolle, was danach kommt.