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

Question

我收到此错误:

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

在<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