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

Posted 2023-02-22

【中文标题】React Router 无法读取未定义的 ToUpperCase ... 基本示例

【英文标题】：React Router cannot read ToUpperCase of undefined... basic example

【发布时间】：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'));

【参考方案1】：

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

对不起 *** 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'));
);