Issue with react using react-router

Question

I have 3 main components.

this component render the whole app

import React,{Component} from 'react';

import IndexContent from './components/indexContent';
import IndexHome from './components/IndexHome';
import Root from './components/root';

import {BrowserRouter as Router, Match, Miss} from 'react-router';


   class Home extends Component{

    return(
            <Router>
                    <div>
                        <Root />
                        <Match exactly pattern='/' component={IndexContent}/>
                        <Match pattern="/indexhome" component={IndexHome}/>
                    </div>
            </Router>
        )

};

export default Home;

In this component I have the navBar and the footer and in the {this.props.children} I want that the clicked component will be rendered.

import React,{Component} from 'react';

import NavBar from './NavBar';
import Footer from './footer';

class Root extends Component{
    render:function(){
        return(
               <div>
                  <NavBar/>
                  {this.props.children}
                  <Footer/>
              </div>
        )
    }
};

export default Root;

And I have another component with a Link

import { Link } from 'react-router';
<Link to="/indexhome">Join In</Link>

I try for a week now to get it work. I understand that there is this new version of 'react-router' and the syntax might be a problem.

What am I doing wrong if all I want is that by Default the index page is the {IndexContent} and when clicking the Link the {IndexHome} will be rendered?

the {Root} is a way to let navBar and footer be in all pages

Answer 1

You're using an old alpha version of React Router. Both Match and Miss are no longer components. Also, you need to import from react-router-dom, not react-router. There are a lot of examples on the documentation page that I recommend you take a look at. Install the latest version of React Router and here's some code to get you started,

<Router>
  <div>
    <Root />
    <Route exactly pattern='/' component={IndexContent}/>
    <Route pattern="/indexhome" component={IndexHome}/>
  </div>
</Router>

Answer 2

If this is what you are trying to achive:

here is a very abstract and simple example (you can change and omit the use of redux provider if you're not using redux ):
consider this entry point:

 // index.js - this is your entry point

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';

import App from 'path/to/component';
import HomePage from 'path/to/component';
import AboutPage from 'path/to/component';
import NotFoundPage from 'path/to/component';
//...
  render( 
    <Provider store={store} >
      <Router routes={
        <Route path="/" component={App}>
          <IndexRoute component={HomePage} />
          <Route path="/home" component={HomePage} />
          <Route path="/about" component={AboutPage} />
          <Route path="*" component={NotFoundPage} />
        </Route>
      } />
    </Provider>, document.getElementById('app')
  );

notice how we have 1 "main" route that reference the App component, and it has "child routes" that reference other components based on the path we define of course. with that in mind, one of react-router's jobs is to pass down the "child components" to the parent App component, again based on the url -> path provided. it does that via props.children.
Now, you can place the child components anywhere you want on your App component or pass them farther down.
In this example, we are rendering a Header component, a child component that we got from react-router and finally a Footer component:

// App.js 

import React from 'react';
import Header from 'path/to/component';
import Footer from 'path/to/component';
//...
class App extends React.Component {
    render() {
        return (
            <div>
                <Header />
                
                {this.props.children /* here are the children that react-router will pass down */} 
                <Footer />
            </div>
        );
    }
}

export default App;

This way, only the props.children are being re-render on each route change, letting the App , Header and Footer remain "static". Of course the styling is up to you, and the names of the components are just for the sake of this example.
PLEASE NOTE - this is relevant for react-router v3.0.0