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

时间:2015-10-03 00:07:31

标签: javascript reactjs 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'));

1 个答案:

答案 0 :(得分:0)

我更改了我的最终语句以匹配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'));
});