Ich habe Probleme, die Ansicht zu ändern, wenn ich auf das Routing reagiere. Ich möchte nur eine Liste der Benutzer anzeigen, und durch Klicken auf jeden Benutzer sollte zu einer Detailseite navigiert werden. Hier ist der Router:
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'))
Wenn ich die URL / Details verwende, navigiert mein Browser zu dieser URL, ändert jedoch nicht die Ansicht. Jede andere Route wirft 404, sodass sie die Route zu erkennen scheint, aber nicht aktualisiert.
reactjs
react-router
MARyan87
quelle
quelle
Antworten:
Sie müssen das Attribut
exact
für Ihre indexRoute angeben, andernfalls stimmt es für eine gerade/details
Route weiterhin überein/
. Versuchen Sie auch,Route
aus zu importierenreact-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'))
AKTUALISIEREN:
Eine andere Sache, die Sie tun müssen, ist, Ihre Komponentenbenutzer mit anzuhängen
withRouter
. Sie müssenwithRouter
nur verwenden, wenn Ihre Komponente nicht dieRouter props
,Dies kann vorkommen, wenn Ihre Komponente ein verschachteltes untergeordnetes Element einer vom Router gerenderten Komponente ist oder Sie die Router-Requisiten nicht an sie übergeben haben oder wenn die Komponente überhaupt nicht mit dem Router verbunden ist und als separate Komponente von gerendert wird die Routen.
In Users.js hinzufügen
import {withRouter} from 'react-router'; ......... export default withRouter(Users)
DOCS
quelle
npm install -S 'prop-types'
indem React.PropsTypes installiert und durch PropTypes ersetzt wird. Aktualisieren Sie auch Ihre package.json, um die neuesten Pakete zu verwenden, da andere Pakete möglicherweise noch React.PropTypes und React.createClassRoute
importiert von "React-Router-Dom" anstelle vonreact-router
withRouter
. Es hat mir zuvor geholfen, das gleiche Problem zu lösen. Gib mir Bescheid. Ich habe den Code auch aktualisiert.Sie müssen nur die Komponenten mit Router einwickeln .
<Route exact path="/mypath" component={withRouter(MyComponent)} />
Hier ist ein Beispiel für eine App.js-Datei:
... import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; class App extends Component { render() { return ( <Router> <Switch> <Route exact path="/" component={withRouter(Home)} /> <Route exact path="/profile" component={withRouter(Profile)} /> </Switch> </Router> ); } } export default App;
Zusätzlich
Wenn Sie einen Reaktionsrouter verwenden, wird componentWillReceiveProps aufgerufen, wenn sich die URL ändert.
componentWillReceiveProps(nextProps) { var currentProductId = nextProps.match.params.productId; var nextProductId = nextProps.match.params.productId; // from the new url ... }
Hinweis
Alternativ können Sie die Komponente auch vor dem Export in withRouter einbinden , müssen dann aber noch einige andere Dinge sicherstellen. Normalerweise überspringe ich diesen Schritt.
export default withRouter(Profile)
quelle
Ich hatte das gleiche Problem und stellte fest, dass es daran lag, dass ich einen verschachtelten Router hatte. Nachdem ich den verschachtelten Router entfernt und meine komponentenspezifischen Routen einfach in eine Switch-Komponente eingefügt hatte, wurde das Problem behoben, ohne dass ich WithRouter verwenden oder zusätzliche Änderungen vornehmen musste.
<Router> // <--Remove nested Router <Switch> <Route exact path="/workflows" component={ViewWorkflows} /> <Route path="/workflows/new" component={NewWorkflow} /> </Switch> </Router>
Yusufbek beschreibt ein ähnliches Problem. Ich denke, es ist viel sauberer, die komponentenbezogenen Routen auf Ansichtsebene zu speichern, als sie alle in einem Hauptrouter zu speichern. In einer Produktions-App sind dies viel zu viele Routen, um Probleme einfach durchzulesen und zu beheben.
quelle
Ich habe das gleiche Problem, aber ich habe es behoben. Ich habe die Homepage als letzte platziert. Für mich geht das. Genau wie unten.
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="/details" component={Details} /> <Route path="/" component={Users} /> </div> </BrowserRouter> ), document.getElementById('app'))
quelle
exact
Eigenschaft hätte dies auch für Sie behoben.Bei der Verwendung von Redux und mir gab es ähnliche Probleme, bei denen die URL in der Adressleiste aktualisiert wurde, die App jedoch die entsprechende Komponente nicht lud. Ich konnte lösen, indem ich withRouter zum Export hinzufügte:
import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' export default withRouter(connect(mapStateToProps)(MyComponentName))
quelle
Ich hatte ein ähnliches Problem, aber mit unterschiedlicher Struktur. Ich habe einen Router hinzugefügt, der alle Routen verarbeitet. Ich habe die Switch-Komponente verwendet, um die Ansichten zu wechseln. Aber eigentlich nicht. Nur URL geändert, aber nicht angezeigt. Der Grund dafür war die Link-Komponente, die innerhalb der SideBar-Komponente außerhalb der Router-Komponente verwendet wurde. (Ja, ich habe SideBar mit "withRouter" exportiert, nicht funktioniert). Die Lösung bestand also darin, meine SideBar-Komponente, die alle Link-Komponenten enthält, in meinen Router zu verschieben.
Das Problem liegt in meinen Linkern, sie befinden sich außerhalb meines Routers
<div className="_wrapper"> <SideBar /> // Holds my all linkers <Router> <Switch> <Route path="/" component={Home} /> <Route path="/users" component={Users} /> </Switch> </Router> </div>
Die Lösung bestand darin, meine Linker in meinen Router zu verschieben
<div className="_wrapper"> <Router> <SideBar /> // Holds my all linkers <Switch> <Route path="/" component={Home} /> <Route path="/users" component={Users} /> </Switch> </Router> </div>
quelle
In meinem Fall hatte ich fälschlicherweise zwei
BrowserRouter
s verschachtelt .quelle
BrowserRouter kann den Verlauf in Ihrem Fall nicht verwalten. Verwenden Sie stattdessen "Router". Die Verwendung dieses Routers mit benutzerdefiniertem Verlauf als Requisiten kann zur Lösung Ihres Problems beitragen.
import {Router, Route, Switch, withRouter } from "react-router-dom"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; import {createBrowserHistory} from 'history'; export const customHistory = createBrowserHistory(); //This maintains custom history class App extends Component { render() { return ( <Router history={customHistory}> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/profile" component={Profile} /> </Switch> </Router> ); } } export default App;
Importieren Sie dann in Ihren Komponenten customHistory aus 'App' und navigieren Sie damit.
customHistory.push('/pathname');
Ich hoffe das hilft! :) :)
quelle
exact
Attribut ist bei Verwendung nicht erforderlichSwitch
Sie müssen der Indexroute genau hinzufügen und anstatt diese Routenkomponenten durch div einzuschließen, verwenden Sie Switch from react-router-dom, um zwischen den Routen zu wechseln.
import React from "react"; import ReactDOM from "react-dom"; import { Route, Switch } from 'react-router-dom'; import Users from "./components/Users"; import Details from "./components/Details"; ReactDOM.render(( <div> <Switch> <Route path="/" component={Users} exact/> <Route path="/details" component={Details} /> </Switch> </div> ), document.getElementById('app'))
quelle
Ich hatte ein ähnliches Problem mit React Router Version 4:
Durch Klicken auf die
<Link />
Komponente würde sich die URL ändern, die Ansichten jedoch nicht.Eine der Ansichten wurde
PureComponent
eher verwendet alsComponent
(importiert vonreact
) und das war die Ursache.Durch Ersetzen aller routengerenderten Komponenten, die verwendet wurden
PureComponent
,Component
wurde mein Problem behoben.(Auflösungsquelle: https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785 )
quelle
Hmm, es gibt keinen Schalter, um die Ansicht zu wechseln.
Auf diese Weise verwende ich den Router, um von der Landin-Seite zur Hauptseite zu wechseln
//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/
Ich habe festgestellt, dass Sie einen anderen Router verwenden. Tut mir leid, dann ist diese Geige vielleicht für Sie nützlich
https://fiddle.jshell.net/terda12/mana88Lm/
Vielleicht ist der Schlüssel der Lösung in der Linie für die Hauptrenderfunktion ausgeblendet.
Router.run(routes, function(Handler) { React.render(<Handler />, document.getElementById('container')); });
quelle
Ich hatte ein ähnliches Problem, das mir gefällt. Bitte schauen Sie es sich an. Ich hoffe, es funktioniert.
Sie müssen die Funktion componentWillReceiveProps in Ihrer Komponente verwenden.
Klicken Sie zum ersten Mal auf einen Link, indem Sie die URL aufrufen. www.example.com/content1/ componentDidMount () wird ausgeführt.
Wenn Sie jetzt auf einen anderen Link klicken, sagen Sie www.example.com/content2/, dass dieselbe Komponente aufgerufen wird, aber diesmal ändert sich die Requisite und Sie können auf diese neue Requisite unter componentWillReceiveProps (nextProps) zugreifen, mit der Sie die API aufrufen oder den Status leer machen und neu erhalten können Daten.
componentWillReceiveProps(nextProps){ //call your API and update state with new props }
quelle
Für mich hatte ich:
export MyClass extends React.Component
mit:
export default withRouter(MyClass)
Inzwischen hatte ich in meiner App.js:
import { MyClass } from './MyClass'
Diejenigen, die das Heimspiel spielen, können mein Problem sehen. Ich habe den Import nicht erhalten, da der Router an die untergeordneten Klassen übergeben wurde. Um dies zu bereinigen, habe ich den withRouter- Aufruf in die Route-Komponentendeklaration verschoben :
<Router exact path={'/myclass'} component={withRouter(MyClass)} />
Zurück in MyClass habe ich es in einen Standardexport geändert:
export default MyClass extends React.Component
Und schließlich habe ich in App.js meinen Import geändert in:
import MyClass from './MyClass'
Hoffentlich hilft das jemandem. Dies stellt sicher, dass ich nicht zwei Möglichkeiten hatte, dieselbe Klasse zu exportieren, wodurch das withRouter-Präfix umgangen wurde .
quelle
Versuche dies,
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'))
quelle
Sie sollten dies überprüfen: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
Daher ist es definitiv nicht
Users
oderDetails
, weil sie direkt von gerendert werden<Route>
und derlocation
Wille an weitergegeben wirdprops
.Ich frage mich, warum brauchst du das
<div>
zwischen<BrowserRouter>
und<Route>
? Entfernen Sie das und lassen Sie mich wissen, ob es funktioniert.quelle
Ich hatte ein ähnliches Problem mit einem bedingten Layout:
class LayoutSwitcher extends Component { render () { const isLoggedIn = this.props.isLoggedIn return ( <React.Fragment> { isLoggedIn ? <MainLayout {...this.props} /> : <Login /> } </React.Fragment> ) } }
und schrieb die Bedingungen wie folgt um:
render () { const isLoggedIn = this.props.isLoggedIn if (isLoggedIn) { return <MainLayout {...this.props} /> } return <Login /> }
Das hat es gelöst. In meinem Fall scheint der Kontext verloren gegangen zu sein.
quelle
Ich bekomme das gleiche Problem. Ich glaube nicht, dass er in diesem Fall die Requisite mit Router hinzufügen muss. Überprüfen Sie einfach Ihren NavLink, und schreiben Sie den guten Pfadnamen als Details. Versuchen Sie für die Route, von der spezifischen Route zur allgemeinen Route zu beginnen
<Route path="/details" component={Details} /> <Route path="/" component={Users} />
In Ihrem NavLink sollte es so etwas sein
<NavLink className="nav-link" to="/details"> details<span className="sr-only">(current)</span> </NavLink>
Eine Bemerkung für den Import Es ist besser, zunächst alle mit React zusammenhängenden Dinge zu importieren, nachdem Sie das andere Modul wie dieses importiert haben:
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";
komm so:
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import { Router, Route } from "react-router"; import Users from "./components/Users"; import Details from "./components/Details";
quelle
In meinem Fall löste der Wechsel zu HashRouter anstelle von BrowserRouter mein Problem
quelle
Ich hatte das gleiche Problem und habe es behoben, indem ich den Verlauf aus dem Ordner @types in node_modules importierte. Ich habe es von npm importiert (npm i @history)
quelle
Ich habe auch Ärger gemacht.
https://github.com/chengjianhua/templated-operating-system
Und ich habe die Lösungen von Shubham Khatri ausprobiert, aber es funktioniert nicht.
Ich habe dieses Problem gelöst, kann Ihnen vielleicht helfen.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
Nach dem obigen Führungs Dokument, wenn Sie
PureComponent
oder Statusverwaltung Verwendung mit Tool wieredux
,mobx
kann ... Es blockiert die Aktualisierung Ihrer Route. Überprüfen Sie Ihre Routenkomponente und stellen Sie sicher, dass Sie den Renderer Ihrer Komponente nicht blockiert haben.quelle
versuchen Sie, prop forceRefresh = {true} zu BrowserRouter (Router) hinzuzufügen
import {BrowserRouter as Router} from "react-router-dom"; <Router forceRefresh={true}> /// your <switch> and <route> </Router>
Für mich geht das.
Übrigens ist es keine echte Lösung: D.
quelle