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的{{1}}页面。但是当我点击它时，它没有显示Two和One的内容或组件。

路由器中缺少什么？

需要帮助。

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链接了解更多信息。我希望它会对你有所帮助。

由于

单击后路由器没有得到路由

1 个答案: