代码之家  ›  专栏  ›  技术社区  ›  Shubham Verma

反应:装载机不工作?

  •  2
  • Shubham Verma  · 技术社区  · 8 年前

    routing 具有 Loadable http://localhost:3000/user http://localhost:3000/

    警告:道具类型失败:道具无效 component string 提供给 Route function

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

    index.js:

    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();
    
    2 回复  |  直到 8 年前
        1
  •  2
  •   jovi De Croock    8 年前

    我看到你这样做了: <Route exact path="/" component="Home" /> <Route exact path="/" component={Home} />

        2
  •  0
  •   Kavindu Wijesuriya    8 年前

    isRequired 调用组件时丢失的PropType。你也可以把你的组件贴在这里吗?

    推荐文章