Shashika Shashika - 2 months ago 29
React JSX Question

React-router doesnt work after upgrading from 0.13 to 2.8.1

I upgraded my react-router from version 0.13 to 2.8.1, Then it give an error saying that "Failed to load resource: the server responded with a status of 404 (Not Found)".

This is my code.

import React from 'react'
import Router from 'react-router'

import App from './components/app';
import Main from './components/main';
import CreateOrganization from './components/create-organization';
import ManageUsers from './components/manage-users';
import FldList from './components/fld-list';
import FldView from './components/fld-view';
import WeighIn from './components/weigh-in';
import MatchFlds from './components/match-flds';
import NotFound from './components/not-found';

var { Route, DefaultRoute, NotFoundRoute } = Router;

var routes = (
<Route handler={App}>
<DefaultRoute handler={Main} />
<Route name="CreateOrganization" path="create-organization" handler={CreateOrganization}></Route>
<Route name="manageUsers" path="manage-users" handler={ManageUsers}></Route>
<Route name="fldList" path="fld-list" handler={FldList}></Route>
<Route name="fldView" path="fld-view/:fldId" handler={FldView}></Route>
<Route name="weighIn" path="weigh-in" handler={WeighIn}></Route>
<Route name="matchFlds" path="match-flds" handler={MatchFlds}></Route>
<NotFoundRoute handler={NotFound} />
</Route>
);

Router.run(routes, function (Handler) {
React.render(<Handler />, document.getElementById('react-container'));
});


What should I do here to resolve this error?

Answer

Certain changes have happened to the API and some components have been replaced or become deprecated. Please have a look at the API here and read the upgrade guide here.

Your route should work if you make the following changes:

<Route path="/" component={App}>
  <IndexRoute component={Main} />
  <Route name="CreateOrganization" path="create-organization" component={CreateOrganization}></Route>
  <Route name="manageUsers" path="manage-users" component={ManageUsers}></Route>
  <Route name="fldList" path="fld-list" component={FldList}></Route>
  <Route name="fldView" path="fld-view/:fldId" component={FldView}></Route>
  <Route name="weighIn" path="weigh-in" component={WeighIn}></Route>
  <Route name="matchFlds" path="match-flds" component={MatchFlds}></Route>
  <Route path="**" component={NotFound} />
</Route>

You also need to replace this:

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.getElementById('react-container'));
});

with:

import createBrowserHistory from 'history/lib/createBrowserHistory'
let history = createBrowserHistory()
render(<Router history={history}>{routes}</Router>, el)

Here's a brief list of changes (not all) to take note of:

  • The handler property is now called component
  • The <DefaultRoute> component is now called <IndexRoute>
  • The <NotFoundRoute> component is now deprecated. Use a "catch-all" pattern. Either * or ** (non-greedy vs greedy - read the docs).