How to correctly use react-router?

[Amjad-722]

Somewhat new to react, and liking the library, but running into all kinds of headaches with the router.
Here is my current code, question is below:

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import App from './App';
import MainLayout from './components/MainLayout';
import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';
import NotFound from './components/NotFound';

export default (









)
Now, I have three major problems, which makes me think that maybe I'm just terribly misunderstanding how the router works.

1. Strange url hashes from react http://localhost:3002/#/?_k=xv1opy[], even though they shouldn't be there, as I've already set history={browserHistory}
2. Browser console warnings: "Warning: Location "/" did not match any routes" and "Warning: You cannot change ; it will be ignored." Not sure what's happening here, as I've very clearly defined the Home component to render for path='/'.
3. Probably related, but any time I change routes, the entire application reloads, clearing all my store data. Not ideal, but I think this can be fixed once I fix Added css using aphrodite #1 and (especially) Exposing css as next/css #2.
   More information that might be useful:
   // app.js render() method
   render() {
   return (

{this.props.children}

); } // index.js 'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

if ( process.env.NODE_ENV !== 'production') {
window.React = React;
}

ReactDOM.render(Routes, document.getElementById('main'));
Anyone a bit more familiar with React who can point me in the right direction here? Been pulling my hair out for the past two days on this, and have read seemingly every guide on react-router to no avail.

React

[m-saqlain024]

Your routing is a bit flawed. Try this instead:

This should solve most, if not all, of your errors.

Share
Follow
answered May 30, 2016 at 9:05
Chris's user avatar
Chris
59.1k2020 gold badges118118 silver badges141141 bronze badges
This feel, intuitively, like it should work. But I'm still getting all the same problems. –
jmknoll
CommentedMay 30, 2016 at 9:09
1
Are your dependencies updated? What version of react and react-router do you use? –
Chris
CommentedMay 30, 2016 at 9:14
React 0.14.8, and react-router 1.0.3. –
jmknoll
CommentedMay 30, 2016 at 9:21
1
I believe we've found the problem in that case. react-router v1.0.3 is nearly 6 months old. Latest version is 2.4.1. browserHistory wasn't introduced until 2.0.0. Update your router version and try again. There's also a newer version of react. Check your other dependencies as well. If you use npm you could run the command npm outdated to see which packages are old. –
Chris
CommentedMay 30, 2016 at 9:25
And today I learned a valuable lesson in the react ecosystem : P. Couple of other problems have cropped up, but this fixed the router issues. Thanks.