React-router: hashHistory stopped working in 4.0.0

[ehartford]

Version

4.0.0

Test Case

the jsbin doesn't work because the library is too old, need 4.0.0

Steps to reproduce

Upgrade to 4.0.0

import { Router, hashHistory } from 'react-router';
render(<Router history={hashHistory}>{routes}</Router>, root);

Expected Behavior

It should work

Actual Behavior

It doesn't work

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
in Router
printWarning
localhost/:36 Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (eval at <anonymous>

[emjaksa]

It has been moved to a new package, react-router-dom. Install the new package and follow the docs for HashRouter

[ickata]

It's not clear how to use it from the docs. How to migrate this code for example:

ReactDOM.render((
   <Router history={ReactRouter.hashHistory}>
      <Route path="/" component={Login} />
      <Route path="dashboard" component={Dashboard} />
      <Route path="users" component={Users} />
   </Router>
), document.getElementById( 'page' ) )

[emjaksa]

The getting started guide might be more clear. Just replace BrowserRouter with HashRouter. You no longer need to pass the history as a prop anymore. So for your code it would be.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter,
  Route,
  Link
} from 'react-router-dom';

ReactDOM.render((
   <HashRouter>
      <div>
        <Route exact path="/" component={Login} />
        <Route path="dashboard" component={Dashboard} />
        <Route path="users" component={Users} />
      </div>
   </HashRouter >
), document.getElementById( 'page' ) )

[orangecoding]

@timdorr question on this one: we are currently upgrading from R-router 2 to 4. In 2, we had a file where we used require('react-router').hashHistory; to listen to the hashHistory (also used to push location changes)

How can I do this with the new component HashRouter?

[pshrmn]

@orangecoding https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components

[elquimista]

@orangecoding you can still listen to history in react-router 4.

class App extends React.Component {
  componentDidMount() {
    const { history } = this.props;
    history.listen(e => {
      console.log('listen', e.pathname);
    });
  }
  render() {
    ...
  }
}

...

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Route component={App} />
    </Router>
  </Provider>,
  document.getElementById('root')
);

[Anna098301065]

'react-router' does not contain an export named 'hashHistory'. why?

[timdorr]

@Anna098301065 The API in 4.0 was completely changed. Please read through the docs.

[Hiroki111]

`import React from 'react';
 import {
     HashRouter,
         Route,
     NavLink
 }
 from 'react-router-dom';
 import Posts from './Posts';

 export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
    return (
        <HashRouter>
            <div>
                <ul className="sidebar">
                    <li className="sidebar-list">
                        <NavLink to="/posts" >Posts</NavLink>
                    </li>
                </ul>
                <div className="admin-contents">
                    <Route path="/posts" component={Posts}/>
                </div>
            </div>
        </HashRouter>
    );
}

}`

Accordting to emjaksa, using HashRouter would solve the error.

In my case, however, clicking Link (or NavLink) shows an error message
"Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack".
(although the page itself is properly renderted)