Question

import React, { Component } from 'react';
import './App.css';
var ReactRouter = require('react-router');
var Router  = ReactRouter.Router;
var Route = ReactRouter.Route;
var Navigation = ReactRouter.Navigation;

var StorePicker = React.createClass({
render : function() {
return (
  <form className="store-selector">
    <h2>Please Enter A Store</h2>
    </form>
)
}

});

var routes = (
<Router>
<Route path="/" component={StorePicker}/>
<Route path="store" component={App}/>
</Router>
)
export default routes;

我正在尝试使用react路由器。此代码无效。它没有给出任何错误。但它给出了两个警告。

警告：道具类型失败：道具history在Router标记为必需，但其值为undefined。在路由器

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

Answer 1

警告：
（警告：失败道具类型：道具的历史记录在路由器中标记为必需，但其值未定义。在路由器中）

您缺少路由器的历史记录定义：

<Router history={hasHistory|browserHistory|createMemoryHistory}>
  <Route path="/" component={Home} />
</Router>

注意：您必须使用React路由器将所选历史记录类型添加到导入中，因此如果您选择添加 browserHistory ，您的导入将如下所示：

import { browserHistory, Router, Route } from 'react-router'
           ^---added as a named import

对不同选项的简要说明：

browserHistory：以路径'/'开头的完整网址路径。因此，如果您的SPA位于www.myapp.com，默认情况下，根路径将同步到www.myapp.com/。因此，如果您想要到www.myapp.com/blog的路由，则需要定义路由器路径“/blog”。

hasHistory：做同样的事情，但根从网址中找到的第一个#字符开始：example.com/#/some/path对应于：/some/path

createMemoryHistory：用于测试和服务器渲染。此选项不读取或操作地址栏。

结帐：React Router Histories了解更多信息

React路由器不工作 - 没有错误

1 个答案: