Question

我在MeteorJS项目中使用React Router，并且我已经为这个网址创建了新的slug类型 / blog /：slug 网址和我的组件。

但是，我不知道如何将道具参数传递给我的组件（例如标题，描述，评论等）。当我去 / blog / test-slug 时，我正在测试以显示我的console.log：

Object { path: "/blog/:slug", url: "/blog/test-slug", isExact: true, params: Object }

我没有参数。

您可以看到我的路线：

class Layout extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Header />
          <main className="l-main">
            <Switch>
              <Route exact path='/' component={Home} />
              <Route exact 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) {
  console.log(props.match);
  return (
    <h1>{props.match.params.slug}</h1>
  );
}

我访问文章组件的链接：

<Link to={`/blog/${this.props.post.slug}`}>{this.props.post.title}</Link>

任何人都可以帮我解决这个问题吗？

谢谢社区！

Answer 1

解决方案1：在您添加数据的位置创建代理页面组件。

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

const ArticlePage = ({ match }) =>
    <Article slug={match.params.slug} description="..." />

const Article = ({slug, description}) =>
    <h1>{slug} : {description}</h1>

或者，解决方案2：用户在Route组件中渲染回调：

<Route path='/blog/:slug' render={({match}) => (
  <Article slug={match.params.slug} description="..." />
 )} />

const Article = ({slug, description}) =>
    <h1>{slug} : {description}</h1>

React Router v4将params传递给组件

1 个答案: