如何使用 react-router-dom，我可以指示 link 渲染一个通用的 post 组件，并填充道具？

Question

我正在创建一个包含三个 post 的博客，最初显示为三张卡片，用户可以单击它们以呈现与卡片匹配的 post 组件。现在，我正在使用 reducer 提取每个 post 卡片中使用的必要细节。

这是我的问题：我正在使用三个单独的 post 组件（Post1、Post2 和 Post3），它们充当所使用的组件在每个 Route 标签中。但是，我想让我的代码更加动态，并能够在每个 Route 标记中呈现一个通用的 post 组件，并以某种方式使用来自特定 reducers 对象的信息填充 post 组件，已经用于提取要在每张卡片中使用的信息。

所以，我希望能够写出这样的东西：

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

然后，当单击适当的卡片时，Post 的特定实例将以某种方式呈现 Post，其中包含专门用于 Post1 的 reducer 对象的道具。

有什么方法可以做到这一点吗？？？

这是我的 App.js 代码：

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

这是我的卡片列表代码：

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

Post (Post1) 的代码示例：

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

export default Post1;

和减速器的代码：

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

您可以使用 post id 作为查询参数来创建路由：

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

然后在组件 Post 中，您可以获取 url 参数并根据其值确定您需要从商店获取哪些数据：

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

如何使用 react-router-dom，我可以指示 link 渲染一个通用的 post 组件，并填充道具？

How, using react-router-dom, can I direct a link to render a general post component, populated with props?

javascript

reactjs

react-router

react-redux

react-router-dom