reactjs - 点击后反应路由器没有获得路由

Question

我routes.js是这样的：

const routes =  (
  <Route path="/" component={App}>
        <Route path="/login" component={Login} />
        <Route path="/one" component={One} />
        <Route path="/two" component={Two} />
  </Route>
)
export default routes

我在组件中有一个头文件App，我的头文件如下所示：

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to={`/one`}>One</Link></h3>
        <h3><Link to={`/two`}>Two</Link></h3>
      </div>
    )
  }
}

export default Header

当我运行localhost:3333它时，它会转到App包含Header和One的页面Two。但是当我点击它时，它不显示Oneand的内容或组件Two。

我在路由器中缺少什么？

需要帮忙。

Answer 1

让我猜你错过了this.props.children。所以你的组件应该看起来像

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to={`/one`}>One</Link></h3>
        <h3><Link to={`/two`}>Two</Link></h3>
        <div>{this.props.children}</div> // this is the way how React renders different components based on route 
      </div>
    )
  }
}

export default Header

React-Route链接以获取更多信息。我希望它会帮助你。

谢谢