React-Router 1.0.0 未捕获错误：不变违规：元素类型无效

IT技术 javascript reactjs react-router
2021-04-29 03:14:35

使用 react-router 时出现以下错误：-

谁能告诉我我错在哪里？

未捕获的错误：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

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


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Welcome</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));
3个回答

以下几行解决了我的错误

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

首先，抱歉我的英语不好。我遇到了同样的问题，几个小时后，是如何解决这个问题的：

1 - 您应该像 Saroj 所说的那样导入正确的module：

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

2 - 之后，您可能会遇到类似“localhost:3000/#/?_k=ckuvup”这样的 url 问题。所以，这样做：

npm install history --save

...然后

var createBrowserHistory = require('history/lib/createBrowserHistory');

并为此更改您的路由器配置：

ReactDOM.render((
  <Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
), document.getElementById('content'));

...并在此处阅读以了解为什么要这样做

完成所有这些事情后，例如，当您使用 gulp 服务器提供服务时，您可能会遇到一些麻烦。我建议看看这里。

Router是1.0.0 API 中的命名导出：

var {Router, Route} = require('react-router')
其它你可能感兴趣的问题
上一篇React Hooks：Hooks 时代的无状态组件 VS 类组件——哪个更好，更推荐？ 下一篇Next.js 使用 getServerSideProps 如何将props从页面传递到组件？