Javascript 如何使用普通路由定义配置react路由器v3？

我试图使用react router v3获得简单的路由定义，但正如您从中看到的，没有任何组件正在加载

代码如下：

import Home from "/components/Home";
import About from "/components/About"; 

class App extends React.Component {
  render() {
    return <Router history={hashHistory} children={this.props.routes} />;
  }
}

let routes = {
  path: "/",
  childRoutes: [Home, About]
};

const root = document.getElementById("root");
ReactDOM.render(<App routes={routes} />, root);

---

首先，顶部的导入不正确。您应该使用

relative

path来包含组件。
第二，要定义路由结构，应该使用

组件

在这里，我对您的代码做了一些更改：

import React from "react";
import ReactDOM from "react-dom";
import { hashHistory, Router, Route } from "react-router";

// components
import Home from "./components/Home";
import About from "./components/About";

class App extends React.Component {
  render() {
    const { routes } = this.props;

    return (
      <Router history={hashHistory}>
        {routes.childRoutes.map(({ Component, path }) => (
          <Route key={path} component={Component} path={path} />
        ))}
      </Router>
    );
  }
}

let routes = {
  path: "/",
  childRoutes: [
    {
      Component: Home,
      path: "home"
    },
    {
      Component: About,
      path: "about"
    }
  ]
};

const root = document.getElementById("root");
ReactDOM.render(<App routes={routes} />, root);

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{hashHistory，Router，Route}；
//组成部分
从“/components/Home”导入主页；
从“/components/About”导入关于；
类应用程序扩展了React.Component{
render（）{
const{routes}=this.props；
返回(
{routes.childRoutes.map（{Component，path}）=>(
))}
);
}
}
让路线={
路径：“/”，
儿童路线：[
{
组成部分：家庭，
路径：“家”
},
{
组成部分：关于，
路径：“关于”
}
]
};
const root=document.getElementById（“根”）；
ReactDOM.render（

页面：



谢谢伊万的回答

事实证明，文档确实解释了这一点，而且没有使用
.map（）
。以下是更新的代码：

import React from "react";
import ReactDOM from "react-dom";
import { hashHistory, Router, Route, Link } from "react-router";

// components
import Home from "./components/Home";
import About from "./components/About";

const App = ({children}) => (
  <div>{children}</div>
)

const routes = {
  path: "/",
  component: App,
  indexRoute: { component: Home },
  childRoutes: [{ path: "about", component: About }]
};

const root = document.getElementById("root");
ReactDOM.render(<Router history={hashHistory} routes={routes} />, document.body)

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{hashHistory，Router，Route，Link}；
//组成部分
从“/components/Home”导入主页；
从“/components/About”导入关于；
常量App=（{children}）=>(
{儿童}
)
常数路由={
路径：“/”，
组件：应用程序，
indexRoute:{组件：主}，
子路由：[{path:“about”，组件：about}]
};
const root=document.getElementById（“根”）；
ReactDOM.render（，document.body）


import React from "react";
import ReactDOM from "react-dom";
import { hashHistory, Router, Route, Link } from "react-router";

// components
import Home from "./components/Home";
import About from "./components/About";

const App = ({children}) => (
  <div>{children}</div>
)

const routes = {
  path: "/",
  component: App,
  indexRoute: { component: Home },
  childRoutes: [{ path: "about", component: About }]
};

const root = document.getElementById("root");
ReactDOM.render(<Router history={hashHistory} routes={routes} />, document.body)