reactjs – react-router如何使用Javascript对象配置索引路由？

发布时间：2020-12-15 16:17:50 所属栏目：百科来源：网络整理

导读：我尝试过以下内容并且无法正常工作： const routeConfig = [ { // path: '/',component: MyApp,indexRoute: {component: Homepage},childRoutes: routes } ]; React.render(Router history={history} routes={routeConfig} /,document.getElementById('conte

我尝试过以下内容并且无法正常工作：

const routeConfig = [
            {
                // path: '/',component: MyApp,indexRoute: {component: Homepage},childRoutes: routes
            }
        ];
        React.render(<Router history={history} routes={routeConfig} />,document.getElementById('content'));

“Homepage”组件完全被忽略！

我正在使用react-router 1.0.0并反应0.13.3

解决方法

首先,要做的最好的事情是升级到1.0最终版(没有重大变化 – 只是错误修复)

请参阅下面的示例,了解如何使用带有IndexRoute的普通路由：

import React from 'react'
import { render } from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router } from 'react-router'

const Home = () =>
  <h3>Home</h3>

const App = (props) =>
  <div>
    <h1>App</h1>
    <Navigation />
    {props.children}
  </div>

const routes = [
  {
      path: '/',component: App,indexRoute: {
        component: Home
      }
  }
]

const Root = () =>
  <Router history={createBrowserHistory()} routes={routes} />


render(<Root />,document.getElementById('root'));

编辑：我为您创建了一个示例here.当您克隆repo时,导航到plain-routes示例和npm install&& npm开始.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!