持久导航React-Router

Question

React的新手，使用React-Router尝试在我的应用程序中创建持久性导航时遇到麻烦。

使用create-react-app和"react-router": "^3.0.2"

我试图在页面顶部仅显示一个带有两个链接的导航。 我一直收到的错误是Uncaught Error: <Link>s rendered outside of a router context cannot navigate.

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';
import { Router, Route } from 'react-router';
import Routes from './routes';
import App from './components/App';
import './index.css';
import Navigation from './components/Navigation';

ReactDOM.render(
  <div>
    <Navigation />
    <Routes history={browserHistory} />
  </div>,
  document.getElementById('root')
);

导航/ index.js

import React, { Component } from 'react';
import { Link } from 'react-router';

class Navigation extends Component {
  render() {
     return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="not-found">Not Found</Link></li>
        </ul>
      </div>
    );
  }
}

export default Navigation;

routes.js

import React from 'react';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';
import App from './components/App';
import About from './components/About';
import NotFound from './components/NotFound';
import Navigation from './components/Navigation';

const Routes = (props) => (
  <div>
    <Router {...props}>
      <Route path="/" component={App} />
      <Route path="/about" component={About}/>
      <Route path="*" component={NotFound} />
    </Router>
  </div>
);

export default Routes;

我可以通过url（即localhost：8080 / about）进行导航，并呈现正确的页面。 但是无法弄清楚如何使导航正常工作并呈现正确的链接。

Answer 1

您应该将Navigation组件作为App组件的一部分而不是在index.js呈现

App看起来应该像

class App extends Component {
  render() {
     return (
      <div>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}

而且您的路线也需要稍作更改。

<Router {...props}>
  <Route path="/" component={App}>
    {/* If you have a home page in your App component already, move it to a Home component */}
    <IndexRoute component={Home} />
    <Route path="/about" component={About}/>
    <Route path="*" component={NotFound} />
  </Route>
</Router>

React路由器会将组件从子路由作为子级传递到父路由。

例如，查看其文档中的介绍示例 。