Вы не должны использовать Route или withRouter() вне маршрутизатора при использовании реактивного маршрутизатора 4 и стилевого компонента в реакции

Я пытаюсь создать свой первый портфельный веб-сайт и застревать в маршрутизации, используя реактивные маршрутизаторы 4.2.2 и стилизованные компоненты 2.2.3.

сообщение об ошибке: Вы не должны использовать Route или withRouter() вне маршрутизатора

Я также пытаюсь использовать ссылку вместо NavLink, но также получил ошибку (Не следует использовать ссылку вне маршрутизатора)

Кто-то мне поможет.

navigationBar.js

import React, { Component } from 'react';
import { NavigationContainer, NavItem } from './navigationBar.style';

class NavigationBar extends Component {
  render() {
    return (
      <NavigationContainer>
        <NavItem to="/">Home</NavItem>
        <NavItem to="/projects">Project</NavItem>
      </NavigationContainer>
    );
  }
}

export default NavigationBar;

navigationBar.style.js

import styled from 'styled-components';
import { Flex, Div } from 'theme/grid';
import { NavLink } from 'react-router-dom';

export const NavigationContainer = styled(Flex)`
  position: fixed;
  right: 20px;
  top: 0.5em;
  font-size: 1em;  
`;
export const NavItem = styled(NavLink)`
  position: relative;
  padding-left: 10px;
  cursor: pointer;
`;

Ответ 1

Удостоверьтесь, что вы завернули основной код рендеринга реакции в маршрутизаторе. Например, с Reaction-DOM вам нужно обернуть приложение в Browser-Router. Если это проект Udacity, это, как правило, файл index.js.

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>

  , document.getElementById('root'));

Ответ 2

Хорошо, что вы используете NavLink вне BrowserRouter/ HashRouter (независимо от того, что вы используете)

Ты сам это сказал

Вы не должны использовать ссылку вне маршрутизатора

Убедитесь, что у вас есть структура, подобная этой

// App render or whatever
render() {
  return (
    <BrowserRouter>
       <NavigationBar />
       {`whatever else you doin'`}
    </BrowserRouter>
  );
}

Вы всегда должны отображать их внутри маршрутизатора

Ответ 3

Это сработало и для меня! Спасибо!