Question

我无法弄清楚如何使用React-router的任何相对较新的（反应13+）版本。当前README上的示例建议通过直接呈现Router来集成它（使用通过子Route元素定义的路由）。另一位官员overview doc似乎建议使用Router.run。 react-router examples使用前者。没有对我有用：根据用途我会得到不同的错误：

当尝试rendering the Router element directly使用react-router时，我得到＆＃34;未捕获错误：不变违规：A需要有效位置“
当试图通过running Router.run with routes使用react-router时，我得到“Uncaught TypeError：无法读取属性＆＃39; toUpperCase＆＃39; of null“

Answer 1

我正在使用反应路由器版本0.13.3和反应版本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导出中获得它们。希望很清楚。

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

Answer 2

here is a simplified version of how to use it, this is using webpack for requires but this is irrelevant, if you have access to React and Router it will work.

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

3 个答案: