单击后反应路由器没有获得路线

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 时，它会转到包含 Header 以及 One 和 Two 的 App 页面。但是当我点击它时，它没有显示 One 和 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 link 获取更多信息。我希望它能帮助你。

谢谢

单击后反应路由器没有获得路线

react router not getting route after click

reactjs

react-router

react-routing