reactjs - 在路由器上下文之外呈现的链接无法处理点击

Question

我收到此错误:

Links rendered outside of a router context cannot handle clicks

上 <Link>标记但无法找出原因。

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

你并没有真正正确地使用 React Router，你需要渲染一个 <Router>组件和 <Router> 内部，渲染您的路线( <Route> 组件)。

您将需要类似的东西:

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

因为你并没有真正渲染 <Router> ，React Router 抛出此错误。

您可以在此处查看更多信息:

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