withrouter 'n'est pas exporté de' react-router-dome

J'ai vu que vous utilisez React-Router-Dom 6 et c'est très différent de la version 5. Vous avez 2 options, rétrogradent à la version 5 ou essayez d'implémenter la nouvelle version ici est la nouvelle documentation Documentation

Essayez d'installer l'ancienne version, par exemple la version 5. Cela ne fonctionnera pas sur la dernière version 6. et je peux voir que c'est ce que vous utilisez.

// Vous pouvez importer ceci et cette fonction

import {
    useLocation,
    useNavigate,
    useParams
  } from "react-router-dom";
  
  function withRouter(Component) {
    function ComponentWithRouterProp(props) {
      let location = useLocation();
      let navigate = useNavigate();
      let params = useParams();
      return (
        <Component
          {...props}
          router={{ location, navigate, params }}
        />
      );
    }
  
    return ComponentWithRouterProp;
  }

J'ai eu le même problème. Je l'ai corrigé en rétrogradant react-router et react-router-dom à la version 5.2.0 .

Il suffit d'exécuter NPM Installer React-Router-Dom@5.2.0 et NPM Install React-Router@5.2.0 . Cela devrait résoudre le problème avec withrouter () .

Depuis la page FAQ, vous devez avoir réagi 16.8+ pour pouvoir utiliser des crochets. Je suis sur 17.0.2, semble fonctionner bien:

https://reactrouter.com / docs / en / v6 / faq

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

Dans mon cas, réagir l'application Arrêtez la rediffusion lorsque l'itinéraire change après la migration vers réagir v.18 ;

pour l'instant j'ai laissé react-router-dom Code> sur v.5 mais pour résoudre le problème déplacé réagir le mode strict à l'intérieur de l'itinéraire:

          <HashRouter>
            <React.StrictMode>
                <App />
            </React.StrictMode>
          </HashRouter>` 

Pour ceux qui préfèrent les composants de la classe pour les composants de fonction, la solution équivalente pour React-Route-Dom V6 est:

import { useLocation } from "react-router-dom";

const withLocation = Component => props => {
    const location = useLocation();
  
    return <Component {...props} location={location} />;
  };


export default withLocation( MyComponent)

La même s'applique à usenavigation et useParams .

Je n'ai pas trouvé des emballages prêts dans la bibliothèque à l'époque.

Eh bien, puisque Withrouter est supprimé de React-Router V6, vous pouvez créer votre propre fonction.

import { useNavigate } from 'react-router';

export const withRouter = (Component) =>{
    const Wrapper = (props) =>{
        const history = useNavigate();
        return <Component history={history} {...props}/>
    } 
    return Wrapper;
}