CODEWITHSUNDEEP
reactjsreact-router
Ycon
Ycon

Reputation: 1950

React-router not rendering page

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

Upvotes: 0

Views: 227

Answers (1)

Gihan
Gihan

Reputation: 4283

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

Upvotes: 1

Related Questions