Javascript 将路由器DOM与React.js TypeError一起使用：无法读取属性；名称“；未定义的

我正试图在我的React.js应用程序上实现React路由器，但当我将路由器添加到我的程序中时，我开始出现一个奇怪的错误

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

ReactDOM.render(
,

这就是我在index.js中实现

组件的地方。但由于某种原因，当我将其添加到我的应用程序中时，我得到了错误：

TypeError:无法读取未定义的属性“name”

name是我的一个对象userInput的参数，我通过道具将它传递给我的子组件App.js中的“headline”

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

在headline.jsx文件中，我调用了一个带有文本呈现的

{this.props.userInput.name}

的

标记，然后出现错误

只要我从index.js文件中删除
组件，一切都会完美地开始工作。

*注意-是的，我试图将
组件也放在我的App.js中。不，我没有忘记导入它。
在您的路由中，您声明要在路由“/”中呈现组件是
Headline
组件，但您没有向其传递任何道具。这意味着每当您访问主页时，
Headline
组件都可能试图访问未分配的属性

根据您的问题，我假设您已经在
中呈现了
标题
组件，有关如何使用
组件的详细信息。
在您的路由中，您声明要在路由“/”中呈现的组件是
Headline
组件，但您没有向其传递任何道具。这意味着每当您访问主页时，
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>