带有 React 13.3+ 的 React-Router答案

【问题标题】：React-Router with React 13.3+带有 React 13.3+ 的 React-Router
【发布时间】：2015-07-07 18:16:38
【问题描述】：

我不知道如何使用任何相对较新（react 13+）版本的 React-router 。当前README 的示例建议通过直接渲染Router 来集成它（通过子Route 元素定义路由）。另一位官方overview doc 似乎建议使用Router.run。 react-router examples 使用前者。没有一个对我有用：根据使用情况，我会遇到不同的错误：

当rendering the Router element directly 尝试使用 react-router 时，我收到“未捕获的错误：不变违规：A 需要一个有效的位置”
在尝试使用 running Router.run with routes 的 react-router 时，我收到“未捕获的类型错误：无法读取属性 'toUpperCase' of null”

【问题讨论】：

上面链接的所有代码，但我想我没有说得那么明显。对不起。从这里开始：github.com/nonword/react-router-tests/blob/master/app/assets/…

标签： reactjs react-router

【解决方案1】：

这里是如何使用它的简化版本，这是使用 webpack 来满足需求，但这无关紧要，如果您可以访问 React 和 Router，它就可以工作。

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

var Comp0 = require('./comp0.jsx');
var Comp1 = require('./comp1.jsx');
var Comp2 = require('./comp2.jsx');

var App = React.createClass({
render: function () {
    return (
        <div>
            <div >
                <li><Link to="comp0">comp0</Link></li>
                <li><Link to="comp1">comp1</Link></li>
                <li><Link to="comp2">comp2</Link></li>
            </div>
            <div>
                <RouteHandler {...this.props}/>
            </div>
        </div>
     );
    }
});

var routes = (
  <Route name="app" path="/" handler={App}>
      <Route name="comp1"  handler={Comp1}/>
      <Route name="comp2"  handler={Comp2}/>
      <DefaultRoute name="comp0"  handler={Comp0}/>
  </Route>
);


Router.run(routes, function (Handler) {
   React.render(<Handler />, document.body);
});

【讨论】：

【解决方案2】：

我正在使用 react-router 版本 0.13.3 和 react 版本 0.13.3（是的，两者都是相同的）。我使用Router.run() 方式，以便可以在 URL 更改时重新呈现 UI。我将展示适合我的代码，它在 ES6 中（尽管从中派生 ES5 应该不会太难）：

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

// Components
import App from './components/App.js';
import Home from './components/Home.js';
import SampleComponent from './components/SampleComponent.js';

const AppRoutes = (
  <Route path="/" handler={App}>
    <DefaultRoute name="home" handler={Home} />
    <Route name="sample" handler={SampleComponent} />
  </Route>
);

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

确保您在AppRoutes 中指定的组件是可访问的（通过导入或要求它们）。同样在这种情况下，我使用了DefaultRoute，例如AppRoutes - 所以如果您使用类似的配置，请确保您可以从react-router 导出中获得它们。希望这很清楚。

如果您仍然遇到问题，请分享您的代码。

【讨论】：

【解决方案3】：

我有一个现有的示例代码，您可以参考 - https://github.com/iroy2000/react-reflux-boilerplate-with-webpack

对于感兴趣的人，它被称为“React Reflux Workflow Boilerplate”，它是一个工作流框架，通过提供开箱即用的开发和生产就绪的构建流程框架，让开发人员的工作变得更轻松。

【讨论】：