React路由器V4无法获得匹配参数

我正在使用React Router V4来学习React for Beginner教程。但是我无法在我的组件中获得我的参数。这里是我的代码的一部分。React路由器V4无法获得匹配参数

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}`) 
    } 

}

而且在我的应用程序组件，我不能得到STOREID。

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

我的代码有什么问题？

来源

2017-09-13 Shawn Rong

你能提供全StorePicker组件文件：

我从反应路由器网站把这个直接？ –

@AnkitParikh我已经更新了我的代码 –

它是否需要''？ – bennygenel

阵营路由器4已经重新vamped：

的路由器环境不再注入自动道具（如果我没记错，这是取决于你如何规定的情况下如何反应的路由器3的工作，或路由器呈现的组件）。

试试这个：

import { withRouter } from 'react-router';

导出您的组件时，将它包装：

withRouter(MyComponent)

这应该正确注入您正在寻找这样的道具他们arent不确定。

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

来源

2017-09-13 09:31:36 Marrs

所以我应该导出我的应用程序组件像导出默认与路由器（应用程序）？ –

我不是很确定，但'withRouter'是用于与路由没有直接关系的组件。而不是传递道具给每个孩子，你可以使用'withRouter' – bennygenel

是的，所以声明你的类在顶部，例如：class App extends React.Component。然后在底部'出口默认与路由器（应用程序）'，授予我不知道你的应用程序设置，但我假设这是你的问题，为什么它的未定义 – Marrs

React路由器V4无法获得匹配参数

回答

相关问题