web-dev-qa-db-fra.com

React Router travaille sur le rechargement, mais pas en cliquant sur un lien

J'ai configuré React avec react-router version 4. Le routage fonctionne lorsque j'entre l'URL directement sur le navigateur. Toutefois, lorsque je clique sur le lien, l'URL change dans le navigateur (par exemple, http: // localhost: 8080/categories ), mais le contenu n'est pas mis à jour (mais si je fais une actualisation, il sera mis à jour). 

Voici ma configuration:

La configuration de Routes.js est la suivante:

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

Le lien que j'utilise dans Nav.js est le suivant:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

Le App.js est le suivant:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;
reactjsreact-routerreact-reduxreact-router-reduxreact-router-v4
15
Suthan Bala

Envelopper votre composant avec withRouter devrait faire le travail pour vous. withRouter est nécessaire pour un composant qui utilise Link ou tout autre accessoire Router et qui ne reçoit pas le Router props directement de Route ou du Parent Component

Les accessoires de routeur sont disponibles pour le composant lorsqu'il est appelé comme

<Route component={App}/>

ou 

<Route render={(props) => <App {...props}/>}/>

ou si vous placez la Links en tant qu’enfants directs du tag routeur, comme

<Router>
     <Link path="/">Home</Link>
</Router>

Si vous souhaitez écrire le contenu enfant dans Router en tant que composant, par exemple

<Router>
     <App/>
</Router>

Les accessoires du routeur ne seront pas disponibles pour l'application. Vous pouvez donc passer l'appel en utilisant un itinéraire tel que

<Router>
     <Route component={App}/>
</Router>

Cependant, withRouter est pratique lorsque vous souhaitez fournir les accessoires de routeur à un composant hautement imbriqué. Vérifiez cette solution

import {withRouter} from 'react-router'

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default withRouter(AppComponent);
9
Shubham Khatri

Je voudrais passer en revue vos composants et vous assurer que vous n’avez qu’un <Router> ... </Router>. Aussi - assurez-vous que vous avez un <Router>...</Router>Il peut arriver que vous en utilisiez plusieurs, mais que vous ayez accidentellement des routeurs imbriqués (parce que vous piratiez rapidement et oubliez d'en supprimer un lorsque à toutes sortes d'endroits ;-) - cela pourrait causer un problème. 

Je voudrais essayer

import {
  BrowserRouter as Router,
}  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

Dans votre composant le plus haut (App.js).

2
Peege151

L'ordre dans lequel inclure le composant est également important dans votre fichier index.js. BrowserRouter, fournisseur puis l'application.

ReactDOM.render(
  <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
  </BrowserRouter>,
  document.getElementById('app')
);
0
Suthan Bala

J'avais exactement le même problème, mais la cause mienne était beaucoup plus simple. 

Dans mon cas, j'avais un espace à la fin de la chaîne d'URL:

<Link to={ "/myentity/" + id + "/edit " } >Edit</Link>

Cela ne fonctionnerait pas lorsque je clique sur le lien, mais l'URL se mettrait à jour dans la barre d'adresse. Taper sur la barre d'adresse du navigateur et appuyer sur la touche enter fonctionnerait alors correctement.

En supprimant l'espace corrigé:

<Link to={ "/myentity/" + id + "/edit" } >Edit</Link>

Assez évident je suppose, mais facile à négliger. Quelques cheveux ont été tirés avant que je remarque (et clairement je me suis retrouvé ici), espérons que cela sauvera quelques cheveux à quelqu'un d'autre.

0
JoGoFo