web-dev-qa-db-fra.com

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

J'essaie de créer mon premier site Web de portefeuille et je suis resté bloqué dans l'acheminement à l'aide de react-router-dom 4.2.2 et de styled-components 2.2.3.

message d'erreur: vous ne devez pas utiliser Route ou withRouter () en dehors d'un routeur

J'essaie aussi d'utiliser Link au lieu de NavLink mais j'ai aussi une erreur (vous ne devez pas utiliser Link en dehors d'un routeur)

Quelqu'un m'aide 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;
`;
javascriptreactjsreact-routerstyled-components
31
JongHun Lee

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'));
32
Bruce Seymour

Eh bien, vous utilisez un NavLink en dehors du BrowserRouter/HashRouter (quoi que vous utilisiez)

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.

11
João Cunha