2017-04-11 50 views
8

Ich habe Probleme beim Ändern der Ansicht in reagieren mit Routing. Es scheint, dass ich alles versucht habe, was ich ohne Glück googlen kann. Ich möchte nur eine Liste von Benutzern anzeigen, und wenn ich auf jeden Benutzer klicke, sollte ich zu einer Detailseite navigieren. Hier ist der Router:Router reagieren ändert URL aber nicht anzeigen

import React from "react"; 
import ReactDOM from "react-dom"; 
import { BrowserRouter } from 'react-router-dom'; 
import Users from "./components/Users"; 
import { Router, Route } from "react-router"; 
import Details from "./components/Details"; 

ReactDOM.render((
    <BrowserRouter> 
    <div> 
     <Route path="/" component={Users} /> 
     <Route path="/details" component={Details} /> 
    </div> 
    </BrowserRouter> 
), document.getElementById('app')) 

Als ich die URL verwenden/Details meines Browser zu dieser URL navigiert, aber nicht die Ansicht ändern. Jede andere Route löst 404 aus, sodass sie die Route zu erkennen scheint, aber nicht aktualisiert wird.

+0

Dies würde passieren, wenn es einige Javascript-Fehler gibt. Hast du die 'Konsole' auf Fehler überprüft? – Panther

+0

Sie könnten ein bisschen mehr von Ihrem Code teilen – KornholioBeavis

+0

Ich bekomme zwei Fehler: Eine besagt, dass die Verwendung von Proptypen aus dem Haupt-Paket ist veraltet. Zwei Aussagen mit React.createClass ist veraltet. Ich dachte, dass dies nicht zusammenhängt, da der Code ohne Routing funktioniert. – MARyan87

Antwort

6

Sie müssen das Attribut exact für Ihre indexRoute angeben, andernfalls wird sogar für /details Route es mit / übereinstimmen. Versuchen Sie auch Route von react-router-dom

import React from "react"; 
import ReactDOM from "react-dom"; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import Users from "./components/Users"; 

import Details from "./components/Details"; 

ReactDOM.render((
    <BrowserRouter> 
    <div> 
     <Route exact path="/" component={Users} /> 
     <Route path="/details" component={Details} /> 
    </div> 
    </BrowserRouter> 
), document.getElementById('app')) 

UPDATE zu importieren:

Eine andere Sache, die Sie tun müssen, ist Ihre Komponente Benutzer mit withRouter zu befestigen. Sie brauchen nur den Einsatz von withRouter zu machen, wenn Ihre Komponente ist nicht die Router props empfängt,

Dies in Fällen passieren kann, wenn Ihre Komponente ein verschachteltes Kind einer Komponente durch den Router oder Sie bestanden haben, nicht wiedergegeben ist Router unterstützt es oder wenn die Komponente überhaupt nicht mit dem Router verbunden ist und als eine separate Komponente von den Routen gerendert wird.

In Users.js

hinzufügen
import {withRouter} from 'react-router} 

... 
export default withRouter(Users) 

DOCS

+0

Ich habe dies tatsächlich versucht, und es scheint nichts zu ändern. – MARyan87

+0

Die Warnung "proptypes" kann entfernt werden, indem "npm install -S Prop-Typen" installiert und React.PropsTypes durch PropTypes ersetzt wird. Aktualisieren Sie auch Ihre package.json, um das neueste Paket zu verwenden, da andere Pakete möglicherweise noch React.PropTypes und React.createClass verwenden. –

+0

Versuchen Sie auch, die Seite neu zu laden, wenn sich die URL ändert, um zu sehen, ob sie lädt –

0

ich zu Schwierigkeiten traf.

https://github.com/chengjianhua/templated-operating-system

Und ich habe die Lösungen von Shubham Khatri metioned versucht, aber es funktioniert nicht.


Ich löste dieses Problem, vielleicht kann Ihnen helfen.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

die obige Führungsdokument nach, wenn Sie PureComponent verwenden oder verwenden Sie mit staatlichen Management-Tools wie redux, mobx ... Es kann die Aktualisierung Ihrer Route blockieren. Überprüfen Sie Ihre Routenkomponente, und stellen Sie sicher, dass Sie die Neuzustellung Ihrer Komponente nicht blockiert haben.

0

die Sie interessieren,

import React from "react"; 

import ReactDOM from "react-dom"; 
import Users from "./components/Users"; 
import { Router, Route } from "react-router"; 


import Details from "./components/Details"; 

ReactDOM.render((
    <Router> 
     <Route path="/" component={Wrapper} > 
      <IndexRoute component={Users} /> 
      <Route path="/details" component={Details} /> 
     </Route> 
    </Router> 
), document.getElementById('app')) 
+0

Definieren Sie eine Wrapper-Komponente, die this.props.children rendert. Dies wird ordnungsgemäß weitergeleitet. –

0

Hmm gibt es keinen Schalter, um tatsächlich Ansichten zu wechseln.

dieses ist wie i-Router verwenden, um von landin Seite Hauptseite

//index.jsx  
ReactDOM.render((<BrowserRouter><App/></BrowserRouter>), document.getElementById('root')); 


//App.jsx 
render() 
{ 
    return <div> 
     <Switch> 
      <Route exact path='/' component={Lander}/> 
      <Route path='/vadatajs' component={Vadatajs}/> 
     </Switch> 
    </div> 
} 

https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/

ups ich fand Sie verschiedene Router ..sorry verwenden dann vielleicht diese Geige für Sie nützlich

wechseln

https://fiddle.jshell.net/terda12/mana88Lm/

vielleicht Schlüssel der Lösung für die wichtigsten in Linie render Funktion hiden ist ..

Router.run(routes, function(Handler) { 
    React.render(<Handler />, document.getElementById('container')); 
}); 
+0

Bitte verlinken Sie nicht auf Ihre eigene Website für einen Beispielcode. Erstellen Sie stattdessen eine JS-Geige. –

Verwandte Themen