react router 1.0.0-rc1 的基本实现显示错误答案

【问题标题】：Basic implementaton of react router 1.0.0-rc1 shows errorreact router 1.0.0-rc1 的基本实现显示错误
【发布时间】：2015-12-20 05:40:50
【问题描述】：

尝试在我的项目中实现 react-router 1.0.0-rc1，但出现以下错误：

1) 警告：React.createElement：类型不应为 null 或未定义。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。 2) 警告：只有函数或字符串可以作为 React 组件挂载。 3) Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

routes.js 文件：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

var Home = require('./components/home.js');
var Jobs = require('./components/jobs.js');
var JobDetail = require('./components/jobDetail');
var App = require('./components/app.js');
var About = require('./components/about.js');
var NotFoundPage = require('./components/notfoundpage.js');

var routes = (<Router>
        <Route path="/" component={App}>
            <Route path="jobs" component={Jobs}>
                <Route path="jobs-detail" component={JobDetail} />
            </Route>
            <Route path="*" component={NotFoundPage} />
        </Route>
    </Router>);

module.exports = routes;

app.js 文件：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var routes = require('./routes');

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

【问题讨论】：

标签： javascript reactjs reactjs-flux react-router

【解决方案1】：

您有两批 Router 标记（一份在 app.js 中，一份在 routes.js 中）。

从你的路由文件中删除Router标签然后app.js可以如下：

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

我发现upgrade guide 非常有用

【讨论】：

【解决方案2】：

@Clarkie 提供的答案是正确的，但我仍然缺少其他一些东西，最终设法让它工作。

1) 我仍然有我们在 1.0.0-rc1 中不需要的应用程序组件。现在我们可以有一个具有所需路径和组件名称的路由。就我而言，现在我的路由文件（routes.js）看起来像这样：

var routes = (
    <Route>
        <Route path="/" component={Home} /> 
        <Route path="jobs" component={Jobs}>
            <Route path="jobdetail/:id" component={JobDetail} /> 
        </Route>
        <Route path="about" component={About} />  
        <Route path="*" component={NotFoundPage} /> 
    </Route>    
    );

我已经在 initialize_app.js 中渲染了我的路线，在您的情况下，您可以在 app.js 或其他文件中执行此操作。在我的例子中，渲染代码如下所示：

var createHashHistory = require('react-router/node_modules/history/lib/createHashHistory');
var history = createHashHistory();

React.render(<Router history={history}>{routes}</Router>, document.body);

请注意，我已按照@Clarkie 的建议删除了 routes.js 中的“路由器”。

我使用了 hash 样式的 url，如果你需要干净的 url，你可以使用 createBrowserHistory，如doc 所示。

2) 导入 react-router 的小改动：在以前的版本中，我曾经需要路由器和路由，如下所示：

  var Router = require('react-router');
  var Route = Router.Route;

但在新版本中是这样的：

   var ReactRouter = require('react-router');
   var Router = ReactRouter.Router;
   var Route = ReactRouter.Route;

【讨论】：