React Router v^4.0.0 Uncaught TypeError: Kann Eigenschaft ‘location’ von undefined nicht lesen

Lesezeit: 7 Minuten

Ich hatte einige Probleme mit React Router (ich verwende Version^4.0.0).

das ist meine index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';


ReactDOM.render(
  <Router history={browserHistory} >
    <Route path="https://stackoverflow.com/" component={App} />

  </Router>,
  document.getElementById('root')
);

die App.js ist einfach alles. Ich poste hier das grundlegende, weil es nicht das Problem ist (glaube ich)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

und das passiert, wenn ich das Konsolenprotokoll überprüfe

Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (Router.js:43)
    at ReactCompositeComponent.js:295
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

oh, und das ist die package.json für alle Fälle

{
  "name": "teste2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Ich habe das an anderen Stellen überprüft, aber ich habe keinen Weg gefunden, es zu lösen.

Vielen Dank Jungs für eure Geduld und Hilfe!!

Benutzer-Avatar
Tyler McGinnis

Du machst ein paar Dinge falsch.

  1. Erstens ist browserHistory keine Sache in V4, also können Sie das entfernen.

  2. Zweitens importieren Sie alles aus react-routeres sollte sein react-router-dom.

  3. Dritte, react-router-dom exportiert nicht a Routerstattdessen exportiert es a BrowserRouter also musst du import { BrowserRouter as Router } from 'react-router-dom.

Sieht so aus, als hätten Sie gerade Ihre V3-App genommen und erwartet, dass sie mit v4 funktioniert, was keine gute Idee ist.

  • Das ist irgendwie der Fall haha. Ich habe aus einem Kurs in Udemy gelernt und es hat V3 verwendet. Das habe ich versucht, hat nicht funktioniert. Ich habe nach einer Möglichkeit gesucht, es in V4 zu verwenden, aber alles, was ich finden konnte, waren Leute, die mir sagten, ich solle dowgraden. so bin ich hier gelandet. Auf jeden Fall vielen Dank für deine Hilfe. Ich weiß es wirklich zu schätzen 😀

    – Lukas fersa

    20. März 2017 um 3:00 Uhr

  • Hey Tyler, hast du einen Beispielcode dafür?

    – Mohammed Ashrafali

    23. Mai 2017 um 7:05 Uhr

  • Ich habe den gleichen Fehler in React-Router in 4.1.1, nachdem ich diese Schritte ausgeführt habe. Muss ich selbst ein Verlaufsobjekt erstellen?

    – PDN

    8. Juni 2017 um 5:28 Uhr

  • Danke, Mann! Als ich Ihre Antwort las, fand ich heraus, dass ich den Fehler aufgrund der React-Router-Version hatte. Da ich keine gute Dokumentation für v4 finden konnte, entschied ich mich für ein Downgrade auf V3 und dann fing es an, für mich zu funktionieren, wie ich es wollte

    – sergioviniciuss

    10. Juni 2017 um 21:47 Uhr

  • @TylerMcGinnis “react-router-dom exportiert keinen Router” github.com/ReactTraining/react-router/blob/… React-Router-Dom gibt diese Warnung aus, die besagt, dass sie verwendet werden soll Router.

    – Corysimmons

    30. März 2018 um 0:18 Uhr

Ersetzen

import { Router, Route, Link, browserHistory } from 'react-router';

Mit

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

Es wird anfangen zu arbeiten. Dies liegt daran, dass der React-Router-Dom den BrowserRouter exportiert

  • Ersetzt React-Router-Dom React-Router oder müssen beide installiert sein?

    – JohnnyBizzle

    9. April 2020 um 20:34 Uhr

  • Behalten Sie nur den React-Router-Dom bei

    – Ajay P

    17. April 2020 um 7:29 Uhr

Ich habe alles versucht, was hier vorgeschlagen wurde, aber es hat bei mir nicht funktioniert. Falls ich also jemandem mit einem ähnlichen Problem helfen kann, wurde jedes einzelne Tutorial, das ich überprüft habe, nicht aktualisiert, um mit Version 4 zu funktionieren.

Hier ist, was ich getan habe, damit es funktioniert

import React from 'react';
import App from './App';

import ReactDOM from 'react-dom';
import {
    HashRouter,
    Route
} from 'react-router-dom';


 ReactDOM.render((
        <HashRouter>
            <div>
                <Route path="https://stackoverflow.com/" render={()=><App items={temasArray}/>}/>
            </div>
        </HashRouter >
    ), document.getElementById('root'));

Nur so habe ich es geschafft, dass es ohne Fehler oder Warnungen funktioniert.

Falls Sie für mich Requisiten an Ihre Komponente übergeben möchten, ist dies der einfachste Weg:

 <Route path="https://stackoverflow.com/" render={()=><App items={temasArray}/>}/>

  • Ich habe eine ähnliche Einrichtung, aber auf meiner Zielseite wird meine erste Komponente angezeigt, ohne jemals auf den Menülink geklickt zu haben. Ich werde eine Frage posten. Danke

    – Si8

    8. Juli 2019 um 15:44 Uhr

location vom useLocation-Hook oder vom useHistory-Hook referenziert den BrowserRouter von React-Router-Dom

Rufen Sie also nur useLocation und useHistory von untergeordneten Komponenten auf, damit der folgende Code funktioniert

#src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter,Switch, Route, } from "react-router-dom";

ReactDOM.render(
  <>
    <BrowserRouter>
      <Switch>
        <Route>
           <App />
        <Route>
      </Switch>   
    </BrowserRouter>
      </>,
      document.getElementById("root")
    );

dann können Sie in Ihrer App.js den Standort durch den useLocation-Hook oder useHistory abrufen

da es ein untergeordnetes Element des BrowserRouters ist, wird es definiert

z.B. const { location} = useHistory();
z.B. const loction = useLocation();

Benutzer-Avatar
vipdanek

Wenn Sie also diesen Code benötigen, verwenden Sie ihn)

import { useRoutes } from "./routes";

import { BrowserRouter as Router } from "react-router-dom";

export const App = () => {

const routes = useRoutes(true);

  return (

    <Router>

      <div className="container">{routes}</div>

    </Router>

  );

};

// ./routes.js 

import { Switch, Route, Redirect } from "react-router-dom";

export const useRoutes = (isAuthenticated) => {
  if (isAuthenticated) {
    return (
      <Switch>
        <Route path="/links" exact>
          <LinksPage />
        </Route>
        <Route path="/create" exact>
          <CreatePage />
        </Route>
        <Route path="/detail/:id">
          <DetailPage />
        </Route>
        <Redirect path="/create" />
      </Switch>
    );
  }
  return (
    <Switch>
      <Route path={"/"} exact>
        <AuthPage />
      </Route>
      <Redirect path={"/"} />
    </Switch>
  );
};

  • Hallo, denken Sie darüber nach, einige Infos zu Ihrem Code hinzuzufügen, erklären Sie, was Sie getan haben.

    – Gianmarco

    23. November 2020 um 0:22 Uhr

  • Ich verwende den Router im Ordner mit Namensrouten, die Sie beim Import in App.js sehen können, und ich verwende in diesem Code die Authentifizierung, wenn isAuthenticated (). Und ich vermittelte Funktionen verwenden Router für App.js

    – vipdanek

    23. November 2020 um 13:09 Uhr

  • Bearbeiten Sie Ihre Antwort, damit Benutzer, die sie lesen, sich ein vollständiges Bild von der Situation und der Lösung machen können

    – Gianmarco

    23. November 2020 um 13:26 Uhr

Benutzer-Avatar
Merkur

   appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    backgroundColor: '#fff' // add the styles here
  }

wenn Sie appBar bereits haben useStyles Sie können die gewünschten Stile hinzufügen.

  • Hallo, denken Sie darüber nach, einige Infos zu Ihrem Code hinzuzufügen, erklären Sie, was Sie getan haben.

    – Gianmarco

    23. November 2020 um 0:22 Uhr

  • Ich verwende den Router im Ordner mit Namensrouten, die Sie beim Import in App.js sehen können, und ich verwende in diesem Code die Authentifizierung, wenn isAuthenticated (). Und ich vermittelte Funktionen verwenden Router für App.js

    – vipdanek

    23. November 2020 um 13:09 Uhr

  • Bearbeiten Sie Ihre Antwort, damit Benutzer, die sie lesen, sich ein vollständiges Bild von der Situation und der Lösung machen können

    – Gianmarco

    23. November 2020 um 13:26 Uhr

Benutzer-Avatar
Suhaib Janjua

Es sollte sein

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

Stellen Sie sicher, dass sie in dieser Reihenfolge aufeinander folgen. Das funktioniert bei mir aber

1256890cookie-checkReact Router v^4.0.0 Uncaught TypeError: Kann Eigenschaft ‘location’ von undefined nicht lesen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy