yönlendiriciye tepki verme v ^ 4.0.0 Yakalanmamış TypeError: Tanımsız 'konum' özelliği okunamıyor

React yönlendiriciyle ilgili bazı sorunlar yaşıyorum (^ 4.0.0 sürümünü kullanıyorum).

bu benim 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="/" component={App} />

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

App.js sadece her şeydir. Buraya temel olanı gönderiyorum, çünkü sorun bu değil (inanıyorum)

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;

ve konsol günlüğünü kontrol ettiğimde olan bu

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, ve bu da package.json her ihtimale karşı

{
  "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"
  }
}

Bunu başka yerlerde kontrol ediyordum ama çözmenin bir yolunu bulamadım.

Sabrınız ve yardımınız için çok teşekkür ederim !!

Birkaç şeyi yanlış yapıyorsun.

1. İlk olarak, browserHistory V4'te bir şey değildir, bu yüzden onu kaldırabilirsiniz.

2. İkincisi, her şeyi kaynağından içe aktarıyorsunuz react-router, olmalı react-router-dom.

3. Üçüncüsü, react-router-doma'yı dışa Routeraktarmaz, bunun yerine, BrowserRouterihtiyacınız olan a'yı dışa aktarır import { BrowserRouter as Router } from 'react-router-dom.

Görünüşe göre V3 uygulamanızı aldınız ve v4 ile çalışmasını beklediniz, ki bu harika bir fikir değil.

Burada önerilen her şeyi denedim ama benim için çalışmadı. Bu nedenle, benzer bir sorunu olan herhangi birine yardımcı olabilirsem, kontrol ettiğim her öğretici sürüm 4 ile çalışacak şekilde güncellenmedi.

İşte çalışmasını sağlamak için yaptığım şey

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="/" render={()=><App items={temasArray}/>}/>
            </div>
        </HashRouter >
    ), document.getElementById('root'));

Herhangi bir hata veya uyarı olmadan çalışmasını sağlamanın tek yolu bu.

Benim için bileşeninize destek vermek istemeniz durumunda en kolay yol şudur:

 <Route path="/" render={()=><App items={temasArray}/>}/>

Değiştir

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

İle

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

Çalışmaya başlayacak. Bunun nedeni, react-router-dom dışa aktarmasıdır BrowserRouter

yani bu kodu kullanmak isterseniz)

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