Question

我在React的首发几周。我试着制作自己的样板。今天我安装了react-router，我遇到了问题。你可以在这里查看我的路线代码。

<Router history={browserHistory}>
    <Route path="/" component={Menubar}>
        <IndexRoute component={App}/>
        <Route path="another" component={Another} />
    </Route>
</Router>

当我打开网络时。它向我展示了一个菜单栏组件，但没有向我展示应用程序或其他组件。我该如何解决这个问题

感谢您的帮助。

Answer 1

嵌套路线概念：

IndexRouter：如果您希望在没有其他子匹配时将子路由用作默认路由，则使用名为的特殊路由。如果我的父路线匹配但我的兄弟姐妹都没有匹配，那么请给我。

嵌套路线：

<Router history={browserHistory}>
  <Route path="/" component={Menubar}>
    <IndexRoute component={App}/>
    <Route path="another" component={Another} />
</Route>

组件将根据路由器嵌套其路由的方式嵌套。当用户访问/时，它将呈现菜单栏和默认子App，当用户访问另一个时，它将呈现菜单栏和另一个。

{this.props.children}：这意味着＆＃34;在父组件内部渲染我的子组件＆＃34; 。

历史记录：React Router是使用历史记录构建的，历史记录知道如何监听浏览器的地址栏以进行更改，并将URL解析为路由器可用于匹配路由并呈现正确集的位置对象组件。

browserHistory：创建看似example.com/some/path

的真实网址

hashHistory：哈希历史记录使用URL的哈希（＃）部分，创建看起来像example.com/#/some/path的路径，

有关反应路由器的好文章：

https://css-tricks.com/learning-react-router/

http://www.hackingwithreact.com/read/1/25/adding-a-root-route-using-react-router-and-indexroute

react-routers嵌套路由不起作用

1 个答案: