Links rendered outside of a router context cannot handle clicks

Question

I am getting this error:

Links rendered outside of a router context cannot handle clicks

on a <Link> Tag and can't figure out the cause for it.

import React from 'react';
import { Router , Route, Link , hashHistory } from 'react-router';


class App extends React.Component {
   render() {
      return (
       <div className="container-fluid">
          <div className="row">
             <div className="col-md-10 col-md-offset-1">
                <Content/>
              </div>
          </div>
       </div>
    );
  }}


class Content extends React.Component{
    render(){
        return(
           <section  id="content-wrapper" className="container">
                <div className="row-fluid">
                    <div className="row">
                     <div className="col-md-6 col-md-offset-3">
                        <div className="col-lg-4">
                          <Link to="/survey"><img className="img-circle" src="assets/images/survey.png" alt="Generic placeholder image" /></Link>

                        </div>
                        <div className="col-lg-4">
                         <Link to="/media"> <img className="img-circle" src="assets/images/media.png" alt="Generic placeholder image"/></Link>


                        </div>
                        <div className="col-lg-4">
                          <Link to="/paticipants"><img className="img-circle" src="assets/images/part.png" alt="Generic placeholder image" /></Link>

                        </div>
                      </div>
                    </div>
                    <div className="row">
                     <div className="col-md-6 col-md-offset-3">
                        <div className="col-lg-4">
                          <Link to="/themes"><img className="img-circle" src="assets/images/themes.png" alt="Generic placeholder image"/></Link>

                        </div>
                        <div className="col-lg-4">
                          <Link to="/tools"><img className="img-circle" src="assets/images/tools.png" alt="Generic placeholder image"/></Link>


                        </div>
                        <div className="col-lg-4">
                          <Link to="/questionaire"><img className="img-circle" src="assets/images/quest.png" alt="Generic placeholder image"  /></Link>

                        </div>
                      </div>
                    </div>
                </div>
         </section>
        );
   }
}

export default App;

Answer 1

You're not really using React Router correctly, you need to render a <Router> component and, inside of <Router>, render your routes (<Route> component).

You will need something like that:

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="my-path" component={MyPath} />
        </Route>
    </Router>

Since you are not really rendering a <Router>, React Router is throwing this error.

You can check more information here:

https://github.com/reactjs/react-router-tutorial/tree/f97d0b7e1ff572aa6711fe29b54e6b8fdf9efddf/lessons/02-rendering-a-route#rendering-a-route