Erro com o React-router | React parte 1: componentes reutilizáveis para sua webapp

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por biancaarantes28

| 177.2k xp | 27 posts

Olá tudo bem?

Estou com problemas para implementar o react router. Segue o erro:

TypeError: Cannot read property 'location' of undefined

Código:

index.js: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { Router, Route } from 'react-router';

ReactDOM.render( ( ), document.getElementById('root') );

// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister();

package.json:

{ "name": "cdm-admin", "version": "0.1.0", "private": true, "dependencies": { "jquery": "^3.3.1", "pubsub-js": "^1.7.0", "react": "^16.6.1", "react-dom": "^16.6.1", "react-router": "^4.3.1", "react-scripts": "2.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

Se alguém puder me ajudar eu agradeço muito!

Desde já agradeço!

3 respostas

solução!

por Matheus Henrique Castiglioni

| 5307.1k xp | 9007 posts

Instrutor Senior Software Engineer

14/11/2018

Fala aí Bianca, tudo bem? Esse problema ocorre porque nas novas versões o React Router preciso de um history para funcionar e conseguir utilizar as features da History API.

Para resolver o problema, instale essa dependência:

// com yarn
yarn add history

// com npm
npm i history

Depois, crie um novo objeto history:

import { createBrowserHistory } from 'history'

const history = createBrowserHistory({
    basename: '',
    forceRefresh: false
})

E por fim, passe via props para o Router:

<Router history={ history}>
    // demais rotas aqui...
</Router>

Espero ter ajudado.

por biancaarantes28

| 177.2k xp | 27 posts

19/11/2018

Ola, Matheus, tudo e você? Primeiramente, muito obrigada pela ajuda! Eu implementei o history, porém não deu certo. Um colega aqui da empresa me ajudou e acabou resolvendo.

Estou usando o BrowserRouter do react-router-dom. Deu certo, só está um pouco diferente do curso, mas está funcionando!

Muito obrigada pela ajuda!

por Matheus Henrique Castiglioni

| 5307.1k xp | 9007 posts

Instrutor Senior Software Engineer

21/11/2018

Estranho Bianca, tem que ver como você fez e versões as lib's que está usando, era para ter dado certo sim.

O importante é que conseguiu resolver \o/