持久導航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路由器會將組件從子路由作為子級傳遞到父路由。

例如，查看其文檔中的介紹示例 。