hash and browser history integration

[darul75]

Hi all,

I am really fighting with new version which looks great but difficult when coming from previous versions.

Here is how my code looks like.

// LIBRARY
/*eslint-disable no-unused-vars*/
import React from 'react';
/*eslint-enable no-unused-vars*/
import createBrowserHistory from 'history/lib/createBrowserHistory';
import {Router, Route, IndexRoute} from 'react-router';

// COMPONENT
import Application from './components/App/App';
import Contact from './components/ContactSection/Contact';
import HomeSection from './components/HomeSection/HomeSection';
import NotFoundSection from './components/NotFoundSection/NotFoundSection';
import TodoSection from './components/TodoSection/TodoSection';

const history = createBrowserHistory();

export default (
  <Router history={history}>
    <Route path='/' component={Application}>
      <IndexRoute component={HomeSection} />
      <Route path='home' component={HomeSection}/>
      <Route path='todo' component={TodoSection}/>
      <Route path='contact' component={Contact}/>
      <Route path='*' component={NotFoundSection} />
    </Route>
  </Router>
);

<li><Link to='/home'>Home</Link></li>
<li><Link to='/todo'>Todo</Link></li>
<li><Link to='/contact'>Contact</Link></li>

What I do not understand is why I always got url of types:

http://127.0.0.1:8080/#/home?_k=aocgkh
http://127.0.0.1:8080/#/contact?_k=lpfzmy
..
instead of
..
http://127.0.0.1:8080/home?_k=aocgkh
http://127.0.0.1:8080/contact?_k=lpfzmy

I am using latest version.

[knowbody]

please have a look into the docs https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md

[knowbody]

also have a look at #2108 #2082 and there are couple more issues on that already

[darul75]

HI @knowbody

I have read all your documentation carefully before asking you.

My issue was coming from refactoring I have made to migrate to 1.0.

routes.js before v1.0

export default (
  <Route name='app' path='/' handler={Application}>
    <Route name='home' path='/home' handler={HomeSection}/>
    <Route name='todo' path='/todo' handler={TodoSection}/>
    <Route name='contact' path="/contact" handler={Contact}/>
    <DefaultRoute handler={HomeSection} />
    <NotFoundRoute handler={NotFoundSection} />
  </Route>
);

v1.0

import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();

<Router history={history}>
<Route path='/' component={Application}>
      <IndexRoute component={HomeSection} />
      <Route path='home' component={HomeSection}/>
      <Route path='todo' component={TodoSection}/>
      <Route path='contact' component={Contact}/>
      <Route path='*' component={NotFoundSection} />
    </Route>
</Router>

rendering before v1.0

const routes = require('./routes');

Router.run(routes, Router.HistoryLocation, (Handler) => {
   React.render(<Handler/>, container);
});

v1.0

const routes = require('./routes');

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

And here was my error.

I wrapped a Router inside another Router but no warning helped me...

v1.0

import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();

<Route path='/' component={Application}>
      <IndexRoute component={HomeSection} />
      <Route path='home' component={HomeSection}/>
      <Route path='todo' component={TodoSection}/>
      <Route path='contact' component={Contact}/>
      <Route path='*' component={NotFoundSection} />
</Route>

and

v1.0

import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();

const routes = require('./routes');

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

fixed the problem...was long to find

[knowbody]

@darul75 👍 glad you worked it out!

[darul75]

maybe it can help someone else too...I had to read a lot of you issues too :)