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

Basic implementaton of react router 1.0.0-rc1 shows error

本文关键字：实现 显示 错误 router 0-rc1 react      更新时间：2023-09-26

尝试在我的项目中实现react-router 1.0.0-rc1，我得到以下错误:

1)警告:反应。createElement: type不应该为空或未定义。它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件)。2)警告:只有函数或字符串可以挂载为React组件。3)未捕获的类型错误:无法读取未定义的属性'toUpperCase'

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);

您有两个Router标记(一个在app.js中，一个在routes.js中)。

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

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

我发现升级指南非常有用

@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中的Router。

我已经使用了哈希风格的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;
相关文章：