O prop `history` é marcado como necessário em` Router`, mas seu valor é `undefined`. no roteador


96

Eu sou novo no ReactJs. Este é o meu código:

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

e compilá-lo com o webpack. Além disso, adicionei o componente principal aos meus aliases. O console gera estes erros: Eu também li estes links:

React Router falhou prop 'histórico', é indefinido

Como eu resolvo que o histórico é marcado como obrigatório, quando o valor é indefinido?

Atualizando React-Router e substituindo hashHistory por browserHistory

e muitas pesquisas na web, mas não consegui resolver esse problema. Roteador React é a versão 4

Respostas:


170

Se estiver usando o react-router v4, você também precisa instalar o react-router-dom. Depois disso, importe BrowserRouter de react-router-dom e mude Router para BrowserRouter. Parece que a v4 muda várias coisas. Além disso, a documentação do react-router está desatualizada. Este é o meu código de trabalho:

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

Fonte


11
Na versão 4, quando você estiver usando 'react-router-dom', não há necessidade de importar 'react-router'. 'react-router-dom' está completo.
Mammad2c,

4
Se eu tiver várias tags <Route ...> dentro do BrowserRouter, recebo este erro: "Erro não detectado: um <Router> pode ter apenas um elemento filho". Como consertar?
olefrank,

1
@erp react-router-dom tem mais opções do que react-router. você pode visitar o documento. Mas você só precisa usar um deles.
Mammad2c

2
@NSCoder não, o roteador também está no 'react-router-dom', portanto não há necessidade de incluir 'react-router-dom' e 'react-router'. Se você precisar de 'HashRouter' e 'roteador' juntos, deverá incluir 'react-router-dom'.
Mammad2c

1
@olefrank você precisa embrulhar suas <Route...>instruções múltiplas em um <switch>wrapper em vez de embrulhá-las <div>. Se você usar <div>, isso torna as rotas inclusivas, o que significa que se um caminho pode corresponder a duas rotas, ambos os componentes serão renderizados. Veja todos os detalhes aqui: medium.com/@djoepramono/react-router-4-gotchas-2ecd1282de65
Muhammad Hannan

17

Qual versão do roteador React você está usando? A versão 4 do roteador mudou de passar na classe browserHistory para passar uma instância de browserHistory; consulte o exemplo de código nos novos documentos .

Isso tem pegado muitas pessoas que fazem upgrade automaticamente; um documento de migração será lançado 'a qualquer momento'.

Você deseja adicionar isto ao topo:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

e

<Router history={newHistory}/>

versão 4. Você poderia converter meu código para a versão 4, por favor?
Mammad2c

onde está customHistorydefinido?
SharpCoder

Desculpe. melhor agora?
Charles Merriam

4

Se você quiser ter várias rotas, pode usar um interruptor como este,

import {Switch} from 'react-router'; 

então

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

3

Eu tive o mesmo problema no ES6, mas quando mudei para usar a biblioteca 'react-router-dom', o problema foi resolvido. Para todos os fãs do ES6, vamos lá:

npm install --save react-router-dom

Em index.js:

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

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

In index.js:ou In index.jsx:?
Raz Galstyan

@RazGalstyan index.js se você estiver usando webpack.
Teoman shipahi

1

A versão 4 do React Router mudou várias coisas. Eles criaram elementos de roteador de nível superior separados para os diferentes tipos de histórico. Se estiver usando a versão 4, você poderá substituir <Router history={hashHistory}>por <HashRouter>ou <BrowserRouter>.
Para obter mais detalhes, consulte https://reacttraining.com/react-router/web/guides


0

Eu também escrevo uma prática de login. E também atender a mesma pergunta como você. Depois de um dia de luta, descobri que só this.props.history.push('/list/')consigo fazer isso em vez de puxar muitos plug-ins. A propósito, a react-router-domversão é ^4.2.2. Obrigado!

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

O seguinte funciona para mim com "react-router@^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')
)
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.