it-swarm.com.ru

Реквизит `history` помечен как обязательный в` Router`, но его значение равно `undefined`. в роутере

Я новичок в ReactJs. Это мой код:

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

и скомпилировать его с помощью веб-пакета. Также я добавил основной компонент в мои псевдонимы. Консоль выдает эти ошибки: Я тоже читаю эти ссылки:

React Router провалил реквизит 'история', не определено

Как решить, что история помечена как обязательная, если значение не определено?

Обновление React-Router и замена hashHistory на browserHistory

и много поисков по сети, но я не мог решить эту проблему. React Маршрутизатор версии 4

76
Mammad2c

Если вы используете response-router v4, вам также необходимо установить response-router-dom. После этого импортируйте BrowserRouter из response-router-dom и переключите Router для BrowserRouter. Кажется, в v4 меняются несколько вещей. Кроме того, документация о реагирующем маршрутизаторе устарела. Это мой рабочий код:

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

Источник

138
betomoretti

Какую версию React Router вы используете? Версия 4 маршрутизатора изменена с передачи класса browserHistory на передачу экземпляра browserHistory, см. Пример code в новых документах .

Это ловило много людей, которые автоматически обновляются; миграционный документ выйдет «в любой день».

Вы хотите добавить это к вершине:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

а также 

<Router history={newHistory}/>
13
Charles Merriam

Если вы хотите иметь несколько маршрутов вы можете использовать переключатель, как это,

import {Switch} from 'react-router'; 

затем 

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

У меня возникла та же проблема в ES6, но когда я переключился на использование библиотеки «act-router-dom », проблема была решена. Для всех поклонников ES6, здесь мы идем:

npm install --save react-router-dom 

В index.js:

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

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

Версия 4 React Router изменила несколько вещей. Они сделали отдельные элементы маршрутизатора верхнего уровня для разных типов истории. Если вы используете версию 4, вы сможете заменить <Router history={hashHistory}> на <HashRouter> или <BrowserRouter>.
Подробнее см. https://reacttraining.com/react-router/web/guides

1
jack.lin

Я также пишу практику входа в систему. А также встретить тот же вопрос, что и вы. После дневной борьбы я обнаружил, что только this.props.history.Push('/list/') может сделать это вместо того, чтобы использовать множество плагинов. Кстати, версия react-router-dom - это ^4.2.2. Спасибо!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.Push(path);
        }
    })
}

0
YangFang

Ниже работает для меня с "[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')
)
0
Pritam Manerao