React Router v4.0 Breaking changes

[KhalilMohammad]

Router v4 is a little bit different

HashHistory

import  { HashRouter as Router, Route } from 'react-router-dom';
import App from './components/App'; 
render((
    <Router>
        <Route exact path="/" component={App} />
     </Router>  ),
document.getElementById('root'));

BrowserHistory

import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './components/App';
render((
     <Router>
         <Route exact path="/" component={App} />    
      </Router> ),  
 document.getElementById('root'));

[arrmixer]

Hey thanks! I'll try them. I was going to attempt to update to Router v4 once I was done with the project as a refactoring job.

[KhalilMohammad]

Welcome, Since there are multiple breaking changes in React Router v4. You can ask me for any problem. I will try to help when possible.

[DrewDrinkwater]

This is what I ended up with for the "Simple Routing" section using the latest React Router:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import  { HashRouter as Router, Route, Switch } from 'react-router-dom';

import IssueList from './IssueList.jsx';
import IssueEdit from './IssueEdit.jsx';

const contentNode = document.getElementById('contents');
const NoMatch = () => <p>Page Not Found</p>;

const RoutedApp = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={IssueList} />
            <Route path="/issueEdit" component={IssueEdit} />
            <Route path="*" component={NoMatch} />
        </Switch>
    </Router>
);

ReactDOM.render(<RoutedApp />, contentNode);

if (module.hot) {
    module.hot.accept();
}

[orangesoncom]

Hi @DrewDrinkwater, @KhalilMohammad Can you show me the code of IssueEdit.jsx based on Route Parameter in Chapter 8. I clicked the link on the id field but have no luck, the page doesn't change even the url has been changed like this (http://localhost:8000/#/issues/5a6339c8ea5f506eb300582f) here is my App.jsx

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import IssueList from './IssueList.jsx';
import IssueEdit from './IssueEdit.jsx';

const contentNode = document.getElementById('contents');
const NoMatch = () => <p>Page not Found</p>;

const RoutedApp = () => (
  <Router>
    <Switch>
      <Redirect exact from="/" to="/issues" />
      <Route path="/issues" component={IssueList} />
      <Route path="/issues/:id" component={IssueEdit} />
      <Route path="*" component={NoMatch} />
    </Switch>
  </Router>
);

ReactDOM.render(<RoutedApp />, contentNode); // Render the component inside the content Node

if (module.hot) {
  module.hot.accept();
}

and the IssueEdit.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

export default class IssueEdit extends React.Component {
  render() {
    return (
      <div>
        This is placeholder for edit {this.props.match.params.id}
        <Link to="/issues">Back to Issue List.</Link>
      </div>
    );
  }
}

IssueEdit.propTypes = { 
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    })
  }),
};

Edit: It's works now after change route section like this <Route exact path="/issues" component={IssueList} />