反应路由器 - 正确使用嵌套路由内的链接

Question

我正在尝试创建一个博客提要，当用户单击任何博客 post 时，路由会更改为仅显示个人 post + header。这使用了一些带有 react-router 的嵌套路由，所有 tutorials 显示了如何在嵌套中进一步显示动态数据，而不是如何覆盖 parent 路由。

博客组件：

class Blog extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const posts = [
       { id: 1, title: "Post 1", slug: "post-1" },
       { id: 2, title: "Post 2", slug: "post-2" },
       { id: 3, title: "Post 3", slug: "post-3" }
    ];
    return (
      <>
        <Header />
        <Route
          exact
          path="/"
          render={() => (
            <>
              <SidebarLeft />
              <Feed />
              <SidebarRight />
            </>
          )}
        />
        {/* I need to somehow pass the postTitle & postSlug props by only having access to the slug url param */}
        <Route path="/articles/:postSlug" component={Post} />
      </>
    );
  }
}

供稿组件：

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    // gets posts from props
    var jsonPosts = this.props.posts;
    var arr = [];
    Object.keys(jsonPosts).forEach(function(key) {
      arr.push(jsonPosts[key]);
    });
    return (
      <>
        {arr.map(post => (
          <Post
            key={post.id}
            postSlug={post.slug}
            postTitle={post.title}
          />
        ))}
      </>
    );
  }
}

Post分量：

class Post extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>{this.props.postTitle}</h1>
      <Link to={'/articles/' + this.props.postSlug}>{this.props.postSlug}</Link>
    );
  }
}

index.jsx

// renders all of react
ReactDOM.render(
  <Router>
    <Route path="/" component={Blog} />
  </Router>,
  document.getElementById('root')
);

CodeSandbox

我遇到的问题是 Feed 工作正常，所有 Post 链接都工作。只要我单击任何 post，反应就不知道我正在尝试访问哪个 Post。

这是我不确定如何继续的地方，因为我找到的所有教程都只显示了进一步嵌套的 Post 组件。我如何告诉 React 我正在尝试查看哪个 post 并让它在 Blog 组件中呈现适当的路由？

Answer 1

您的代码运行良好，但您必须添加一些额外的逻辑才能在 /articles/:postSlug 匹配时传递正确的道具。

例子

class Blog extends React.Component {
  render() {
    const posts = [
      { id: 1, title: "Post 1", slug: "post-1" },
      { id: 2, title: "Post 2", slug: "post-2" },
      { id: 3, title: "Post 3", slug: "post-3" }
    ];

    return (
      <>
        <Header />
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              <Feed posts={posts} />
            )}
          />
          <Route
            path="/articles/:postSlug"
            render={props => {
              const post = posts.find(p => p.slug === props.match.params.postSlug);

              if (!post) {
                return null;
              }
              return <Post {...props} postTitle={post.title} postSlug={post.slug} />;
            }}
          />
        </Switch>
      </>
    );
  }
}

反应路由器 - 正确使用嵌套路由内的链接

react router - properly using links inside nested routes

reactjs

react-router

react-router-v4