嵌套路由和 Switch - 如何传递 props.match.params.id？

Question

我一直在尝试理解 React v4 Router 中的嵌套路由和开关。考虑主路由器看起来像这样（简化）：

<Switch>
  <Route path="/" component={LoginPage} exact={true} />
  <Route path="/dashboard/edit/:id" component={DashboardPage} />
  <Route path="/dashboard" component={DashboardPage} />
</Switch>

"dashboard"组件渲染子路由：

  render(){
    return (
      <div className="note">
        <Route to='/edit/:id' render={(props) =>
          <div>
            <NoteList {...props} />
            <EditNotePage {...props} />
          </div>
        } />
      </div>
    )
  }

"EditNotePage" 组件可以通过以下方式访问参数：

const mapStateToProps = (state, props) => ({
  note: state.notes.find((note) => note.id === props.match.params.id
});

这是正确的做法吗？两次指定“/dashboard/edit/:id”似乎有点多余（？）一次在主路由器中，一次在仪表板组件中。

但是，如果我不匹配主路由器 "Switch" 中的路由，则 "props.match.params.id" 无法访问，因为 "props.match" 只会指向 "/dashboard" 。

我是否错过了有关 React v4 路由器工作原理的重要信息？ :)

亲切的问候克米特

Answer 1

没有，没有遗漏任何东西。这就是 React Router v4 的工作原理。您定义完整的路线。您可以使用的技巧是您可以获取当前路径并将其添加到您的 "nested path".

嵌套路由和 Switch - 如何传递 props.match.params.id？

Nested routes and Switch - how to pass props.match.params.id?

javascript

reactjs

react-router-v4