CODEWITHSUNDEEP
reactjsecmascript-6react-router
Raz Galstyan
Raz Galstyan

Reputation: 327

Conversion from React Router V2.x to V4.x

After updating React Router V2.x on V4.x, all routes go to the main page.

Here is the route on V2.x:

import {Router, Route, hashHistory } from 'react-router'

const routes = <Route component={App}>
  <Route path="/results" component={Results} />
  <Route path="/" component={Voting} />
</Route>;

ReactDOM.render(
  <Router history={hashHistory}>{routes}</Router>,
  document.getElementById('app')
);

And these are routes on V4.x:

index.jsx file:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './components/App';
import Voting from './components/Voting';
import Results from './components/Results';

const withAppLayout = Component => props => <App><Component {...props} /></App>

const routes = <Switch>
    <Route exact path="/" component={withAppLayout(Voting)} />
    <Route path="/results" component={withAppLayout(Results)} />
</Switch>;

ReactDOM.render(
        <Router component={App}>
            {routes}
        </Router>,
        document.getElementById('app')
        );

App.jsx File:

import React from 'react';
import {List} from 'immutable';

const pair = List.of('Trainspotting', '28 Days Later');

export default React.createClass({
    render: function () {
        console.log(this.props.children);
        return React.cloneElement(this.props.children, {pair: pair});
    }
});

Voting.jsx File:

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Winner from './Winner';
import Vote from './Vote';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>
            {this.props.winner ?
                            <Winner ref="winner" winner={this.props.winner} /> :
                            <Vote {...this.props} />
            }
        </div>;
    }
});

Results.jsx File:

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default React.createClass({
    mixins: [PureRenderMixin],
    render: function () {
        return <div>Hello from results!</div>
    }
});

How to fix this error?

Upvotes: 0

Views: 151

Answers (1)

Arnaud Boeglin
Arnaud Boeglin

Reputation: 773

One thing would be to use :

<Route exact path="/" component={withAppLayout(Voting)} />

The exact will make sure that only that exact path is going to match. But if you have the path="/" after the others, the others should match first though. Is this the real code you're using ?

Edit: See a complete version below.

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

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Voting} />
            <Route path="/results" component={Results} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);

Then, if that works out, you can move the Switch part into an App Component. Also, if you want to use hash history, you need to use a HashRouter that basically initializes a Router with a hash history.

Upvotes: 1

Related Questions