Постоянная навигация

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


reactjs javascript react-router
person wsfuller    schedule 23.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны визуализировать компонент 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 будет передавать компоненты из подмаршрутов как дочерние в родительский маршрут.

Например, ознакомьтесь с вводными примерами. в их документации.

person Jo Peyper    schedule 23.02.2017
comment
Так что с трудом оборачиваю голову вокруг этого. Должно ли приложение на самом деле быть просто моим IndexRoute, а вложенным в приложение должны быть все остальные мои компоненты? Итак, у меня есть приложение, отображаемое с навигацией, теперь, если вы нажмете «О программе», вы отобразите компонент «О программе», вложенный внутри компонента приложения? - person wsfuller; 23.02.2017
comment
это правильно, у вас будет О, отображаемое внутри приложения (это то, что делает {this.props.children}). - person Jo Peyper; 23.02.2017
comment
на самом деле, я собираюсь отредактировать свой ответ, я просто заметил, что вам нужно немного изменить структуру ваших маршрутов... подождите... - person Jo Peyper; 23.02.2017
comment
Вы также можете сделать вещи проще, просто не разделяя routes.js, просто определяя свои маршруты в index.js и Navigation только в App... но вам решать, как вы хотите структурировать вещи (или насколько сумасшедшей может быть ваша навигация) . - person Jo Peyper; 23.02.2017
comment
Да, это то, что я собираюсь сделать. Это все еще не работает именно так, как я ожидаю. Так привык к такому разделению вещей с Angular, что на самом деле это не нужно в React из того, что я вижу в примерах. - person wsfuller; 23.02.2017
comment
Удачи. Ссылка в моем ответе должна помочь вам начать с того, как в основном структурировать ваши маршруты, приложение (навигацию) и страницы. - person Jo Peyper; 23.02.2017