Постоянный навигационный реактивный маршрутизатор

Question

Новое для реагирования и проблем, пытающихся создать постоянную навигацию по моему приложению с использованием 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 router передаст компоненты из подпрограмм в качестве дочерних элементов родительского маршрута.

Например, отметьте introduction examples в своей документации.