wake-up-neo.com

Reagieren Sie beim Nachladen des Routers, nicht jedoch beim Klicken auf einen Link

Ich habe das React mit react-router Version 4 eingerichtet. Das Routing funktioniert, wenn ich die URL direkt im Browser eingebe. Wenn ich jedoch auf den Link klicke, ändert sich die URL im Browser (z. B. http: // localhost: 8080/categories ), aber der Inhalt wird nicht aktualisiert (aber wenn ich eine Aktualisierung mache, wird er aktualisiert). 

Unten ist mein Setup:

Das Routes.js wird wie folgt eingerichtet:

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;

Der Link, den ich in Nav.js verwende, lautet wie folgt:

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

Die App.js lautet wie folgt:

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;
15
Suthan Bala

Das Umschließen Ihrer Komponente mit withRouter sollte die Aufgabe für Sie erledigen. withRouter wird für eine Komponente benötigt, die Link oder andere Router-Requisiten verwendet und den Router props weder direkt von Route noch von Parent Component erhält.

Router-Requisiten stehen der Komponente zur Verfügung, wenn sie wie aufgerufen wird

<Route component={App}/>

oder 

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

oder wenn Sie die Links als direkte untergeordnete Elemente des Routertags platzieren möchten

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

Wenn Sie den untergeordneten Inhalt in Router als Komponente schreiben möchten, z

<Router>
     <App/>
</Router>

Die Router-Requisiten stehen der App nicht zur Verfügung. Daher können Sie den Anruf über eine Route wie "Weiterleiten" übergeben

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

WithRouter ist jedoch in Handy enthalten, wenn Sie die Router-Requisiten für eine stark verschachtelte Komponente bereitstellen möchten. Überprüfen Sie diese Lösung

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

Ich würde Ihre Komponenten durchgehen und sicherstellen, dass Sie nur einen <Router> ... </Router> haben. Außerdem - Vergewissern Sie sich, dass Sie einen <Router>...</Router> haben. Es kann vorkommen, dass Sie mehr als einen verwenden, wenn Sie jedoch versehentlich verschachtelte Router haben (weil Sie schnell gehackt haben und vergessen haben, einen zu entfernen, wenn Sie ihn herumbewegten zu allen möglichen Orten ;-) - es könnte zu Problemen kommen. 

Ich würde versuchen

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

In Ihrer obersten Komponente (App.js).

2
Peege151

Ich war damit konfrontiert, weil ich den react-router Nicht in den Abhängigkeiten der Anwendung (package.json) installiert habe ...

0
Gaspar

Die Reihenfolge, in der die Komponente enthalten ist, ist auch in Ihrer index.js-Datei wichtig. BrowserRouter, Provider und dann die App.

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

Möglicherweise zwei Dinge:

  1. Haben Sie { Link } from 'react-router-dom' In Ihre Nav.js-Datei importiert?

  2. Möglicherweise Rechtschreib-/Großschreibfehler: Sie exportieren export default routes (Kleinbuchstaben), aber import Routes from './../routes (Großbuchstaben).

0
sperfecto

Ich hatte genau das gleiche Problem, aber meine Ursache war viel einfacher. 

In meinem Fall hatte ich ein Leerzeichen am Ende der URL-Zeichenfolge:

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

Funktionierte nicht, wenn ich auf den Link geklickt habe. Die URL wurde jedoch in der Adressleiste aktualisiert. Wenn Sie auf die Adressleiste des Browsers tippen und die Taste enter drücken, funktioniert das ordnungsgemäß.

Das Entfernen des Platzes wurde behoben:

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

Ziemlich offensichtlich, denke ich, aber leicht zu übersehen. Ein paar Haare wurden gezogen, bevor ich es bemerkte (und klar, dass ich hier gelandet bin), ich hoffe, es erspart jemandem ein paar Haare.

0
JoGoFo