React Router 无法读取未定义的 ToUpperCase ... 基本示例答案

【问题标题】：React Router cannot read ToUpperCase of undefined... basic exampleReact Router 无法读取未定义的 ToUpperCase ... 基本示例
【发布时间】：2015-12-31 06:36:46
【问题描述】：

我已安装所有正确的依赖项（此处为 react 和 react-router），并且我使用的是 React Router Github 页面中最基本的示例...但我无法摆脱此错误。

我的 React 路由器是 @ 0.13.3，而 React 也是 0.13.3。

这是我在 JSX 中的代码：

import "../css/master.scss";

import React from 'react';
import { Router, Route, Link } from 'react-router';

const App = React.createClass({
    render() {
        return (
            <div>
                <h1>App</h1>
                    <ul>
                        <li>
                            <Link to="about">About</Link>
                        </li>
                    </ul>
                    {this.props.children}
            </div>
        )
    }
})

const About = React.createClass({
    render() {
        return <h3>About</h3>
    }
})

const Contact = React.createClass({
    render() {
        return <h3>Contact</h3>
    }
})

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    { path: 'about', component: About },
    { path: 'contact', component: Contact },
  ]
}


React.render(<Router routes={routes} />, document.getElementById('app'));

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我修改了最后的语句以匹配 Router.run()，然后渲染了我的 React 组件。在 React-Router 的快速介绍中没有看到这一点。

对不起 StackOverflow V_V

import "../css/master.scss";

import React from 'react';
import  Router, { Route, Link } from 'react-router';

const App = React.createClass({
    render() {
        return (
            <div>
                <h1><Link to="/">App</Link></h1>
                    <ul>
                        <li><Link to="about">About</Link></li>
                        <li><Link to="contact">Contact</Link></li>
                    </ul>
                    {this.props.children}
            </div>
        )
    }
})

const About = React.createClass({
    render() {
        return <h3>About</h3>
    }
})

const Contact = React.createClass({
    render() {
        return <h3>Contact</h3>
    }
})

const AppRoutes = (
    <Route path="/" handler={App}>
        <Route name="about" handler={About} />
        <Route name="contact" handler={Contact} />
    </Route>
);


Router.run(AppRoutes, Router.HashLocation, (Root) => {
  React.render(<Root />, document.getElementById('app'));
});

【讨论】：