Question

我使用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

我的代码出了什么问题？

Answer 1

React Router 4已被重新翻译：

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

试试这个：

import { withRouter } from 'react-router';

导出组件时，请将其包装：

withRouter(MyComponent)

这应该正确地注入你正在寻找的道具，所以它们不是未定义的。

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

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

React Router V4无法获得匹配参数

1 个答案: