Links displayed outside the context of the router cannot handle clicks

Question

I get this error:

Links displayed outside the context of the router cannot handle clicks

in the <Link> and cannot determine the reason for this.

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

The App class 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> ); 

}}

Content extends React.Component class {rendering () {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 the default application

Answer 1

You really are not using React Router correctly, you need to display the <Router> component and display the routes ( <Route> ) inside <Router> .

You will need something like this:

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

Since you are not rendering <Router> , React Router throws this error.

You can see additional information here:

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

Answer 2

This post is kind of old, I came here a little late, maybe the help found below can help someone later.

In case the test only failed due to a link outside the router component, please take a look at MemoryRouter to check the Link component.

Here is a link so people can test props and stuff in unit tests:

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/ Tests /Link-test.js

  const node = document.createElement("div") ReactDOM.render( <MemoryRouter> <Link to="/" innerRef={refCallback}>link</Link> </MemoryRouter>, node )