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

Question

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

这是我的app.jsx：

false

这是routes.js：

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')
);

这是Base.jsx：

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;

这是我的主页（同样我有SignUpPage和LoginPage）：

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;

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

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; 

我已经做过我的研究，但我不知道什么是错的。 我没有得到任何错误。只是render方法返回null。

截图：

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