React Router V4无法获取匹配参数[重复]答案

【问题标题】：React Router V4 can not get the match params [duplicate]React Router V4无法获取匹配参数[重复]
【发布时间】：2017-09-13 09:03:40
【问题描述】：

我正在使用 React Router V4 遵循 React for Beginner 教程。但是我无法在组件中获取参数。这是我的代码的一部分。

const Root = () => {
return (
  <BrowserRouter>
    <div>
      <Switch>
          <Route exact path='/' component={StorePicker} />
          <Route Path='store/:storeId' component={App} />
          <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
)
}

StorePicker 组件：

class StorePicker extends React.Component {
    render() {
        return (
            <form className="store-selector" onSubmit={(e) => this.goToStore(e)}>
                <h2>Please Enter A Store</h2>
                <input type="text" ref={(input) => { this.storeInput= input; }} defaultValue={getFunName()} placeholder="Store Name" required/>
                <button type="submit">Visit Store</button>
            </form>
        )
    }

    goToStore(event) {
        event.preventDefault()
        const storeInput = this.storeInput.value
        console.log(storeInput)
        this.props.history.push(`store/${storeInput}`)
    }

}

在我的 App 组件中，我无法获取 storeId。

//storeId is undefine
this.props.match.params.storeId

我的代码有什么问题？

【问题讨论】：

能否提供整个 StorePicker 组件文件？
@AnkitParikh 我现在更新了我的代码
必须是<Route path='/store/:storeId' component={App} />吗？
@bennygenel 不，这只是一个实践项目
我想我不清楚。我想说，这可能与您在路径上缺少斜线有关。 path='store/:storeId' 可能需要为 path='/store/:storeId'

标签： reactjs react-router

【解决方案1】：

React Router 4 已被重新改造：

路由器上下文不再自动注入到道具中（如果我没记错的话，这就是 react 路由器 3 的工作方式，或者取决于您如何指定路由器渲染的组件的上下文）。

试试这个：

import { withRouter } from 'react-router';

导出组件时，将其包装起来：

withRouter(MyComponent)

这应该正确注入您正在寻找的道具，因此它们不是未定义的。

我直接从 react 路由器站点获取了这个：

https://reacttraining.com/react-router/web/api/withRouter

【讨论】：

所以我应该像 export default withRouter(App) 一样导出我的 App 组件？
我不太确定，但withRouter 用于与路由没有直接关系的组件。您可以使用 withRouter 而不是将道具传递给每个孩子
是的，所以在顶部声明您的课程，例如：class App extends React.Component。然后在底部export default withRouter(App)，授予我不知道您的应用程序设置，但我假设这是您的问题，为什么它未定义
刚刚查看了您的代码，假设它有效，您可能希望在 StorePicker 组件中导入 withRouter，看到您提到了 App。
我仍然无法获取路由器参数。