Reactjs 反应：Loadable不工作？

嗨，我是react的新手，我想用

可加载的
实现
路由
，但当或时，它不会显示空白页面

你能纠正我哪里做错了吗。
我也越来越-

警告：失败的道具类型：类型为
字符串的无效道具
组件
，提供给
路线
，预期的
功能

我的代码是：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>6/5 @ Evergreens</li>
                    <li>6/8 vs Kickers</li>
                    <li>6/14 @ United</li>
                    <li><Link to="/">Home</Link></li>
                </ul>
            </div>
        )
    }
}
export default User;

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';

const Loading = () => <div> Loading... </div>;

const Home = Loadable({
  loader: () => import('./components/home-component/home'),
  loading: Loading
});

const User = Loadable({
  loader: () => import('./components/user-component/user'),
  loading: Loading
});

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component="Home" />
          <Route path="/user" component="User" />
        </Switch>
      </Router>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

registerServiceWorker();

home.js

import React, { Component } from 'react';
import { Link} from 'react-router-dom';


class Home extends Component {
    render() {
        return (
                <div>
                  <h1>Welcome to the Tornadoes Website!</h1>
                  <h5><Link to="/user">User</Link></h5>
                </div>
              );
    }
} 

export default Home;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类Home扩展组件{
render（）{
返回(
欢迎来到龙卷风网站！
使用者
);
}
} 
导出默认主页；

user.js:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>6/5 @ Evergreens</li>
                    <li>6/8 vs Kickers</li>
                    <li>6/14 @ United</li>
                    <li><Link to="/">Home</Link></li>
                </ul>
            </div>
        )
    }
}
export default User;

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';

const Loading = () => <div> Loading... </div>;

const Home = Loadable({
  loader: () => import('./components/home-component/home'),
  loading: Loading
});

const User = Loadable({
  loader: () => import('./components/user-component/user'),
  loading: Loading
});

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component="Home" />
          <Route path="/user" component="User" />
        </Switch>
      </Router>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

registerServiceWorker();

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类用户扩展组件{
render（）{
返回(

6/5@Evergreens
6/8对踢球者
6/14@United
家

)
}
}
导出默认用户；

App.js:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>6/5 @ Evergreens</li>
                    <li>6/8 vs Kickers</li>
                    <li>6/14 @ United</li>
                    <li><Link to="/">Home</Link></li>
                </ul>
            </div>
        )
    }
}
export default User;

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';

const Loading = () => <div> Loading... </div>;

const Home = Loadable({
  loader: () => import('./components/home-component/home'),
  loading: Loading
});

const User = Loadable({
  loader: () => import('./components/user-component/user'),
  loading: Loading
});

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component="Home" />
          <Route path="/user" component="User" />
        </Switch>
      </Router>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

registerServiceWorker();

从“React”导入React；
从“react Router dom”导入{Router，Route，Switch}；
从“./helpers/history”导入{history}；
从“react Loadable”导入Loadable；
导入“/App.css”；
常量加载=（）=>加载；
常量Home=可加载({
加载程序：（）=>导入（'./components/home component/home'），
装货：装货
});
const User=可加载({
加载程序：（）=>导入（'./组件/用户组件/用户'），
装货：装货
});
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

index.js:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>6/5 @ Evergreens</li>
                    <li>6/8 vs Kickers</li>
                    <li>6/14 @ United</li>
                    <li><Link to="/">Home</Link></li>
                </ul>
            </div>
        )
    }
}
export default User;

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';

const Loading = () => <div> Loading... </div>;

const Home = Loadable({
  loader: () => import('./components/home-component/home'),
  loading: Loading
});

const User = Loadable({
  loader: () => import('./components/user-component/user'),
  loading: Loading
});

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component="Home" />
          <Route path="/user" component="User" />
        </Switch>
      </Router>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从“react router dom”导入{BrowserRouter}
ReactDOM.render((
)，document.getElementById（'root'））
registerServiceWorker（）；
我看到您正在这样做：
哪个应该是
，因为您想使用该变量，所以当他不知道您想要哪个组件时，不可能通过字符串引用。我希望这会有所帮助
在我看来，调用组件时缺少了一个
isRequired
propType。你能把你的组件也贴在这里吗？
你是怎么得到它的？它显示警告：失败的道具类型：无效的道具
组件
类型
string
提供给
路由
，预期的
功能
。我从我的检查中得到，但问题仍然是一样的。应该不会真正造成问题，这就是我使用它的方式，它对我来说是有效的，一个问题可能是您的组件不是默认的导出，因为使用
（）=>导入（'./components/home Component/home'）
您使用的是默认导出@jovi De crook，我已经使用导出默认home导出了它；&导出默认用户；是的，我明白了，这就是为什么我说它不应该造成问题。您上面提到的“Its显示警告：失败的道具类型：为路由提供的字符串类型的无效道具组件，预期功能”问题将通过我的回答得到解决。请尝试我的答案，看看是否有其他错误，如果有，请回答：-）可以尝试帮助解决此问题使用类Home扩展组件{}和类User扩展组件{}时，问题仍然相同，但使用export Home时；或出口用户；它将错误显示为意外标记，预期导出用户为{（16:7）；您能解释更多吗？我应该将isRequired放在哪里？@ShubhamVerma您在两个组件home和User中包含了PropType验证吗？