Using Router DOM with React.js TypeError: Cannot read property "name" of undefined

Question

我正在尝试在我的 React.js 应用程序上实施 React Router，但是当我将 Router 添加到我的程序时，我开始收到奇怪的错误。

    ReactDOM.render(
  <BrowserRouter>
    <App />
    <Route path="/" component={Headline}></Route>
    <Route path="/economy" component={Economics}></Route>
  </BrowserRouter>,

这是我在 index.js 中实现 <Router> 组件的地方。但是出于某种原因，一旦我将其添加到我的应用程序中，我就会收到错误消息：

TypeError: Cannot read property 'name' of undefined

name 是我的 objects 之一的参数，userInput，我通过道具传递给我的 child 组件，来自 App.js

的“标题”

<Headline
          userInput={this.state.userInput}
          money={this.state.money}
          displayFakeNews={this.state.displayFakeNews}
          onPublish={this.handlePublish}
        />

在 headline.jsx 文件中，我调用带有文本呈现 {this.props.userInput.name} 的 <button> 标记，但出现错误。

一旦我从 index.js 文件中删除 <Router> 组件，一切就会开始完美运行。

*注意 - 是的，我也尝试将 <Router> 组件放入我的 App.js 中。不，我没有忘记导入它。

Answer 1

在您的路线中，您声明要在路线“/”处呈现的组件是 Headline 组件，但您没有向它传递任何道具。这意味着无论何时您访问主页，Headline 组件都可能会尝试访问未分配的属性。

根据你的问题，我假设你已经在你的 <App /> 组件中呈现了 Headline 组件，并且在这个文件中，它实际上被传递了必要的道具。如果它已经在那里呈现，则不需要在 <App /> 之外使用 <Route />。目前尚不清楚您正在寻找的功能或您如何编写 <App /> 组件，但我认为您应该记住的是您使用的语法不会将任何道具传递给 <Headline /> 从路线。如果你真的想传递这些道具，改变

<Route path="/" component={Headline}></Route>

到

<Route path="/">
  <Headline
    userInput={this.state.userInput}
    money={this.state.money}
    displayFakeNews={this.state.displayFakeNews}
    onPublish={this.handlePublish}
  />
</Route>

将要渲染的组件作为路由的子项传递，这样您就可以实际传递 props。

有关如何使用 <Route /> 组件的更多信息，请参阅 React Router documentation。

Using Router DOM with React.js TypeError: Cannot read property "name" of undefined

Using Router DOM with React.js TypeError: Cannot read property "name" of undefined

javascript

reactjs

react-router

react-props

react-dom