Wie kann ich mit react-router-dom einen Link zum Rendern einer allgemeinen Post-Komponente verwenden, die mit Requisiten gefüllt ist?

Question

Ich erstelle einen Blog mit drei Posts, die anfänglich als drei Karten angezeigt werden, auf die ein Benutzer klicken kann, um die Post-Komponente mit der Karte zu versehen. Im Moment nutze ich einen Reducer, um die notwendigen Details in den Karten jedes Posts zu ziehen.

Hier ist mein Problem: Ich verwende drei einzelne Post-Komponenten (Post1, Post2 und Post3), die als Komponenten in jedem Route-Tag fungieren. Allerdings möchte ich meinen Code dynamischer gestalten und eine allgemeine Post-Komponente in jedem Route-Tag rendern und die Post-Komponente irgendwie mit Informationen aus dem spezifischen Reducers-Objekt füllen, das bereits verwendet wird, um Informationen zur Verwendung in jeder Karte abzurufen .

so, würde ich in der Lage sein mag, so etwas zu schreiben:

<Route exact exact path={`Post1`} component={Post}/> 

und dann, wenn die entsprechende Karte angeklickt wird, irgendwie, dass bestimmte Instanz Post wird Beitrag vom Minderer mit Requisiten machen Objekt speziell für Post1.

Gibt es eine Möglichkeit, dies zu tun ???

Hier ist mein Code für App.js:

class PostCards extends React.Component { 
    render() { 
     var createCards = this.props.cards.map((card, i) => { 
      return (
       <div style={{margin: '20px'}} key={i}> 
        <Link to={`/${card.title}`}> 
         <PostCard title={card.title} subtitle={card.subtitle} date={card.date} text={card.text} backgroundImage={card.image} detail={card.detail}/> 
        </Link> 
       </div> 
      ); 
     }); 
     return (
      <div style={{display: 'flex', flexDirection: 'row'}}>{createCards}</div> 
     ); 
    }; 
} 

function mapStateToProps(state) { 
    return { 
     cards: state.cards 
    }; 
} 

export default connect(mapStateToProps)(PostCards); 

ein Beispiel für den Code für einen Post (Post1):

class App extends React.Component { 
    render() { 
     const blogPosts = { 
      Post1, 
      Post2, 
      Post3 
     }; 

     var createRoutes = this.props.cards.map((card, i) => { 
      return <Route key={i} exact path={`/${card.title}`} exact component={blogPosts[card.id]}/> 
     }); 
     return(
      <Switch> 
       <Route exact path='/' component={PostCards}/> 
       {createRoutes} 
      </Switch> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     cards: state.cards 
    } 
} 

export default withRouter(connect(mapStateToProps)(App)); 

Hier ist mein Code für die Liste der Karten ist

const Post1 =() => { 
    return (
     <div>hello this is post 1</div> 
    ); 
} 

export default Post1; 

und der Code für das Reduktions:

export default function() { 
    return [ 
     { id: 'Post1', 
      title: 'Post1', 
      subtitle: 'subtitle', 
      date: '1.1.17', 
      text: 'this is the post text for post 1', 
      image: 'url("../client/images/image.jpg")', 
      detail: 'this is the detail' 
     }, 

     { id: 'Post2', 
      title: 'Post2', 
      subtitle: 'subtitle', 
      date: '2.1.17', 
      text: 'this is the post text for post 2', 
      image: 'url("../client/images/image.jpg")', 
      detail: 'this is the detail' 
     }, 

     { id: 'Post3', 
      title: 'Post3', 
      subtitle: 'subtitle', 
      date: '3.1.17', 
      text: 'this is the post text for post 3', 
      image: 'url("../client/images/image.jpg")', 
      detail: 'this is the detail' 
     }, 
    ] 
} 

Answer 1

Sie können eine Route mit Post-ID als Abfrageparameter erstellen:

<Route path='/:postId' component={Post}/> 

Dann in der Komponente Post Sie die URL params und basierend auf ihren Wert bestimmen, welche Daten Sie benötigen aus dem Speicher holen kann:

class Post extends Component { 
    componentDidMount() { 
    const postId = this.props.match.params.postId; 
    // fetch data based on postId 
    } 
    render() { 
    return (
     <div> 
     ... 
     </div> 
    ); 
    } 
}