3

Hi I am new in react and I want to implement routing with Loadable, But Its not working Its showing blank page when either http://localhost:3000/user or http://localhost:3000/

Could you please correct me where I am doing wrong. I am also getting-

Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function.

My codes are:

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;

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;

App.js:

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();
Shubham Verma
  • 8,783
  • 6
  • 58
  • 79

2 Answers2

2

I see you are doing this: <Route exact path="/" component="Home" /> which should be <Route exact path="/" component={Home} /> since you want to use that variable, it's impossible to reference by String when he can't know which Component you want. I hope this helps

jovi De Croock
  • 595
  • 2
  • 8
  • I checked with but still problem is same. – Shubham Verma Jun 18 '18 at 08:53
  • Should not really pose a problem, that's how i use it and it works for me, an issue could be that your Component is not the default export since with `() => import('./components/home-component/home')` you are using the default export – jovi De Croock Jun 18 '18 at 08:56
  • @ jovi De Croock I have exported it with export default Home; & export default User; – Shubham Verma Jun 18 '18 at 08:58
  • Yes i see that, that's why i'm saying it shouldn't pose a problem. The issue "Its showing Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function" you stated above will be solved with my answer. Try my answer and see if there's an additional error and reply with it if there is one :-) can try to help with that – jovi De Croock Jun 18 '18 at 08:59
  • While using class Home extends Component { } and class User extends Component { } the problem remains same, But when I am using export Home ; or export User; its showing error as Unexpected token, expected { (16:7) on export User; – Shubham Verma Jun 18 '18 at 09:03
  • Yes but try the solution from my answer with using `component={Home}` and tell me if that has errors. As long as you're starting with a faulty Route distribution. Hold on to the export default – jovi De Croock Jun 18 '18 at 09:08
  • I tested with but still problem is same. nothing has been changed in output – Shubham Verma Jun 18 '18 at 09:10
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173319/discussion-between-jovi-de-croock-and-shubham-verma). – jovi De Croock Jun 18 '18 at 09:11
0

This looks to me like there is a isRequired propType that you have missed when calling your component. Can you post your components here as well?

Kavindu Wijesuriya
  • 157
  • 6