Question

我知道这个问题已被问过很多次了，我已经看过了答案，但我没有走得太远。我正在创建一些样板（因为我厌倦了一遍又一遍地编写相同的基本代码）但我无法通过RR v4;具体而言，params。

这个样板非常简单。现在，我正在使用RR4导航到帖子，但是，即使我使用不同的slug路由到帖子，它也会返回相同的帖子。（first-post）。关于如何正确导航的任何建议？我认为params关注的文档并不太多。这是回购：

https://github.com/boilerstrapper/react-boilerstrap

更新：

以下是一些代码：

components/App/index.js
// ...imports


export const App = () => {
  return (
    <div>
      <Nav />

      <Switch>
        <Route exact path='/' component={Login} />
        <Route exact path='/posts' component={PostList} />
        <Route exact path='/posts/:slug' component={PostListItem} />
        <Route exact path='/products' component={ProductList} />
        <Route exact path='/products/:slug' component={ProductListItem} />
        <Route exact path='/login' component={Login} />
        <Route component={NotFound} />
      </Switch>

    </div>
  );
}

Answer 1

因此，当您只更改url中的param：slug时，您只更改了已作为prop（props.match.params.slug）传递到您拥有的容器组件中，但这并不会破坏现有的组件呈现和重建它（因为它是同一个）。这意味着在您对数据发出http请求时，不会再次调用构造函数。

为了解决这个问题，我做了以下类似的事情：

  componentWillMount() {
    this.loadEvents();
  }
  componentWillReceiveProps(nprops) {
    this.loadEvents(nprops.match.params.orgId);
  }
  loadEvents(orgId = this.props.match.params.orgId) {
    axios.get(`/_api/org/events?org=${orgId}`)
      .then(res => {
        this.setState({ events: res.data });
      })
      .catch(alert);
  }

这样它就会在参数发生变化时请求数据！

Answer 2

所以，我实际上找到了答案。我在我的API中写了这个：

const slug: string = req.body.slug

而不是：

const slug: string = req.params.slug

React Router v4中的参数无法正常工作

2 个答案: