React-router not rendering page

Question

I have used create-react-app to start my project.

I have set my index.html div id to wrapper, and at an index.js I am doing getElementById('wrapper').

I am not getting any Errors. I am only getting a warning that refers to IndexRoute saying: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

How can I get my pages to display?

The repo is here:

https://github.com/yarnball/ReactAuthToken

/index.js

ReactDOM.render(
  <BrowserRouter store={store}>
    <Route routes={routes} onUpdate={logPageView} />
  </BrowserRouter>,
  document.getElementById('wrapper')
);

/routes.js

export default (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="register" component={Register} />
    <Route path="login" component={Login} />
    <Route path="logout" component={Logout} />
    <Route path="forgot-password" component={ForgotPassword} />
    <Route path="reset-password/:resetToken" component={ResetPassword} />
    <Route path="dashboard">
      <IndexRoute component={RequireAuth(Dashboard)} />
      </Route>

    <Route path="*" component={NotFoundPage} />
  </Route>
);

Your react router version?

Gihan
– Gihan

2017-05-18 02:49:52 +00:00
Commented May 18, 2017 at 2:49 — Gihan
– Gihan, Commented May 18, 2017 at 2:49
v4, but 2.6.0 is the same

Ycon
– Ycon

2017-05-18 03:03:48 +00:00
Commented May 18, 2017 at 3:03 — Ycon
– Ycon, Commented May 18, 2017 at 3:03

Gihan · Accepted Answer · 2017-05-18 04:33:32Z

1

Try following changes

index.js

import { Provider } from 'react-redux';
import Routes from './routes';

...    

ReactDOM.render(
  <Routes store={store} />,
  document.getElementById('wrapper')
);

routes.js

import { BrowserRouter, Route } from 'react-router-dom';

...

export default (props) => (
  <BrowserRouter>
    <Provider store={props.store}>
      <div>
        <Route path="/" component={App} />
        <Route path="register" component={Register} />
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="forgot-password" component={ForgotPassword} />
        <Route path="reset-password/:resetToken" component={ResetPassword} />
        <Route path="*" component={NotFoundPage} />
      </div>
    </Provider>
  </BrowserRouter>
);

answered May 18, 2017 at 4:33

Gihan

4,2836 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ycon Over a year ago

Thanks, I tested it out but looks like it might be related to versioning of it after all.

Collectives™ on Stack Overflow

React-router not rendering page

/index.js

/routes.js

1 Answer 1

index.js

routes.js

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

/index.js

/routes.js

1 Answer 1

index.js

routes.js

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related