带有 React 13.3+ 的 React-Router

Question

我不知道如何使用任何相对较新的（反应 13+）版本 React-router . The example on the current README suggests integrating it by rendering Router directly (with routes defined via child Route elements). Another official overview doc seems to advise using Router.run. The react-router examples 使用前者。 None 为我工作：我根据使用情况得到不同的错误：

当 rendering the Router element directly 尝试使用 react-router 时，我收到“未捕获错误：不变违规：A 需要有效位置”
当 running Router.run with routes 尝试使用 react-router 时，我得到“Uncaught TypeError: Cannot read 属性 'toUpperCase' of null”

Answer 1

我正在使用 react-router 版本 0.13.3 和 react 版本 0.13.3（是的，两者相同）。我使用 Router.run() 方式，以便 UI 可以在 URL 更改时重新呈现。我将展示适合我的代码，它在 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 中指定的组件可访问（通过导入或要求它们）。同样在这种情况下，我在 AppRoutes 中使用了 DefaultRoute - 因此，如果您使用类似的配置，请确保您可以从 react-router 导出中获得它们。希望这很清楚。

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

Answer 2

这里是如何使用它的简化版本，这是使用 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);
});

Answer 3

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

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

带有 React 13.3+ 的 React-Router

React-Router with React 13.3+

reactjs

react-router