Question

我宣布我的路线是这样的：

<Row>
  <Route exact path="/services" render={() => <RoutesList {...this.props} />} />
  <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} />
  <Route exact path="/services/edit/:id" render={() => <AddRoute />} />
</Row>

然后在我的代码的某些部分，我创建了一个这样的链接：

<Link to={`/services/edit/${record.id}`}>Edit</Link>

在<Route>中的

我可以在math.params中看到id，但是在<AddRoute>我无法访问此url参数，即使我通过{...this.props}例如<AddRoute {...this.props}>我无法看到url参数并且匹配为空。我的包裹是：

"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",

Answer 1

呈现上面的jsx代码的组件的道具当然不包含匹配对象。怎么可能呢？请参阅docs中有关如何将道具传递给内联渲染函数中的组件的示例：

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

内联render()函数获取了三个路径match，location，history。您必须将箭头render()功能接收的道具传递给您的组件。您可以访问this.props.match.id组件中的AddRoute：

<Row>
  <Route exact path="/services" render={() => <RoutesList {...this.props} />} />
  <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} />
  <Route exact path="/services/edit/:id" render={props => <AddRoute {...props} />} />
</Row>

此外，您不应该总是将所有道具传递给子组件。如果您的AddRoute组件只对id感兴趣，那么您只应传递ID：

<Route exact path="/services/edit/:id" render={props => <AddRoute id={props.match.id} />

这也可能适用于您传播this.props的其他组件。只传递与组件相关的道具，否则最终会出现很难调试的混乱。

访问react-router中的url参数

1 个答案: