Propulsia `history` este marcată ca fiind necesară în `Router`, dar valoarea sa este `undefined`. în Router (Programare, Reactjs, React Router)

Mammad2c a intrebat.

Sunt nou în ReactJs. Acesta este codul meu:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

și compilându-l cu webpack. De asemenea, am adăugat componenta Main la aliasurile mele. Consola aruncă aceste erori: De asemenea, am citit aceste link-uri :

React Router a eșuat prop ‘history’, este nedefinit

Cum rezolv istoria este marcată ca fiind necesară, când valoarea este nedefinită?

Actualizarea React-Router și înlocuirea hashHistory cu browserHistory

și multe căutări pe web, dar nu am putut rezolva această problemă. React Router este versiunea 4

7 răspunsuri
betomoretti

Dacă folosești react-router v4 trebuie să instalezi și react-router-dom. După aceea, importați BrowserRouter din react-router-dom și schimbați Router pentru BrowserRouter. Se pare că v4 schimbă mai multe lucruri. De asemenea, documentația react-router este învechită. Acesta este codul meu de lucru:

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

ReactDOM.render((
     <BrowserRouter>
          <Route path="/" component={App}/>
     </BrowserRouter>
     ),
     document.getElementById('root')
);

Sursa

Comentarii

  • În versiunea 4,când folosiți „react-router-dom”, nu este nevoie să importați „react-router”. ‘react-router-dom’ este complet. –  > Por Mammad2c.
  • Dacă am mai multe <Route …> tag-uri în interiorul BrowserRouter, primesc această eroare: „Uncaught Error: A <Router> may have only one child element”. Cum se rezolvă? –  > Por olefrank.
  • @erp react-router-dom are mai multe opțiuni decât react-router. ați putea vizita documentul. Dar trebuie să folosiți doar una dintre ele. –  > Por Mammad2c.
  • @NSCoder nu, routerul este, de asemenea, în „react-router-dom”, deci nu este nevoie să includeți atât „react-router-dom”, cât și „react-router”. Dacă aveți nevoie de ‘HashRouter’ și ‘router’ împreună, trebuie să includeți ‘react-router-dom’. –  > Por Mammad2c.
  • @olefrank trebuie să vă înfășurați mai multe <Route...> în <switch> wrapper în loc să le înfășurați în <div>. Dacă utilizați <div>, , acest lucru face ca rutele să fie inclusive, ceea ce înseamnă că, dacă o cale se poate potrivi cu două rute, ambele componente vor fi redate. Vedeți toate detaliile aici: medium.com/@djoepramono/react-router-4-gotchas-2ecd1282de65 –  > Por Muhammad Hannan.
Charles Merriam

Ce versiune de React Router folosiți? Versiunea 4 a routerului s-a schimbat de la trecerea clasei browserHistory la trecerea unei instanțe de browserHistory, consultați pagina de exemplul de cod în noua documentație.

Acest lucru a prins o mulțime de oameni care se actualizează în mod automat; un document de migrare va ieși „în orice zi acum”.

Vreți să adăugați acest lucru în partea de sus:

import { createBrowserHistory } from 'history'

const newHistory = createBrowserHistory();

și

<Router history={newHistory}/>

Comentarii

  • versiunea 4. Ați putea să îmi convertiți codul la versiunea 4, vă rog? –  > Por Mammad2c.
  • unde este customHistory definit? –  > Por SharpCoder.
  • scuze. mai bine acum? –  > Por Charles Merriam.
Saurabh Narhe

Dacă doriți să aveți mai multe rute puteți folosi un comutator ca acesta,

import {Switch} from 'react-router'; 

apoi

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

Dimang Chou

Am avut aceeași problemă în ES6, dar când am trecut la utilizarea bibliotecii „react-router-dom”, problema a fost rezolvată. Pentru toți fanii ES6, iată:

npm install --save react-router-dom

În index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={App}/>
    </HashRouter>
  ,
  document.getElementById('root')
);

Comentarii

  • In index.js: sau In index.jsx: ? –  > Por Raz Galstyan.
  • @RazGalstyan index.js dacă folosiți webpack. –  > Por Teoman shipahi.
jack.lin

Versiunea 4 a React Router a schimbat mai multe lucruri. Au făcut elemente de router de nivel superior separate pentru diferitele tipuri de istoric. Dacă utilizați versiunea 4, ar trebui să puteți înlocui <Router history={hashHistory}> cu <HashRouter> sau <BrowserRouter>.
Pentru mai multe detalii, consultați https://reacttraining.com/react-router/web/guides

YangFang

De asemenea, scriu o practică de Login. Și, de asemenea, întâlniți aceeași întrebare ca și dvs. După o zi de luptă, am constatat că doar this.props.history.push('/list/') o poate face în loc să tragă o mulțime de plugin-uri. Apropo, la react-router-dom versiune este ^4.2.2. Mulțumesc!

Pritam Manerao

Ceea ce urmează funcționează pentru mine cu „[email protected]^3.0.5”:

package.json:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)