Vous ne devez pas utiliser Route ou withRouter () en dehors d’un routeur lorsque vous utilisez react-router 4 et styled-composant dans react

Question

Je suis en train de construire mon premier site portfolio et est resté coincé dans le routage à l'aide de réagir-routeur-dom 4.2.2 et de style-composants 2.2.3.

message d'erreur: Vous ne devez pas utiliser la Route ou withRouter() à l'extérieur d'un Routeur

J'ai également essayer d'utiliser le Lien au lieu de NavLink, mais a reçu l'erreur de trop(Vous ne devriez pas utiliser des liens à l'extérieur d'un Routeur)

Quelqu'un m'aider s'il vous plaît.

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;
`;

Answer 1

Assurez-vous d’envelopper le code de rendu de réaction principal dans le routeur. Par exemple, avec react-dom, vous devez envelopper l'application dans Browser-Router. S'il s'agit d'un projet Udacity, il s'agit généralement du fichier index.js.

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

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

  , document.getElementById('root'));
 

Answer 2

Eh bien, vous utilisez un NavLink en dehors de BrowserRouter / HashRouter (peu importe ce que vous utilisez)

Vous l'avez dit vous-même

Vous ne devez pas utiliser Link en dehors d'un routeur

Assurez-vous que vous avez la structure comme celle-ci

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

Vous devez toujours les rendre dans un routeur.