react-router-dom - react-router-dom (v4) 无法路由到自定义 routes.js 中提到的路径

Question

我无法使用 react-router-dom (v4) 路由到 routes.js。

这是我的 app.jsx：

import React from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import routes from './routes.js';

ReactDom.render(
 (
 <BrowserRouter history={history}>
      <Route routes = {routes}/>
 </BrowserRouter>
 ), 
 document.getElementById('react-app')
);

这里是 routes.js：

import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';


const routes = {
  component: Base,
  childRoutes: [

 {
  path: '/',
  component: HomePage
},

{
  path: '/login',
  component: LoginPage
},

{
  path: '/signup',
  component: SignUpPage
}
]
};

export default routes;

这是 Base.jsx：

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router-dom';

const Base = ({ children }) => (
  <div>
    <div className="top-bar">
      <div className="top-bar-left">
        <IndexLink to="/">React App</IndexLink>
      </div>

  <div className="top-bar-right">
    <Link to="/login">Log in</Link>
    <Link to="/signup">Sign up</Link>
  </div>

</div>

{children}

  </div>
);

Base.propTypes = {
  children: PropTypes.object.isRequired
};

export default Base;

这是我的主页（类似地，我有 SignUpPage 和 LoginPage）：

import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';

const HomePage = () => (
  <Card className="container">
    <CardTitle title="React Application" subtitle="This is the home page." />
  </Card>
);

export default HomePage; 

当我尝试使用以下方法进行路由时，它工作正常：

<BrowserRouter history={history}>
      <HomePage />
</BrowserRouter>

我已经做了我的研究，但我不知道出了什么问题。我没有收到任何错误。只是渲染方法返回null。

截屏：

AYY 帮助或提示将不胜感激。谢谢