My Router does not work with webpack2

Question

My Router does not work with webpack2

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Passing my code to ES6 using webpack2 gives me this error:

Warning: React.createElement: type is invalid - expected to string (for built-in components) or a class / function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Routes .

my index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes.jsx';

ReactDOM.render(<Routes/>, document.getElementById('app'));

my Routes.jsx

import React from 'react';
import Router from 'react-router';
import Route from 'react-router';
import Redirect from 'react-router';
import browserHistory from 'react-router';
import Base from './base/base.jsx';
import ProductsList from './products/app.jsx';
import Login from './authenticate/login.jsx';


export default class Routes extends React.Component {

render(){
    return(
      <Router history={browserHistory}>
          <Redirect from="/" to="listado"/>
            <Route path="/" component={Base}>
              <Route path="listado" component={ProductsList}/>
              <Route path="login" component={Login}/>
             </Route>
       </Router>
  );
 }
}

javascript reactjs

asked by Victor Magallanes 23.02.2017 в 15:04

source

3 answers

1

If you are using a higher version of React, you will have to use

Import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

and for the Router

<Router history={browserHistory}>
  <div>
    <Redirect from="/" to="listado"/>
    <Route path="/" component={Base}>
    <Route path="listado" component={ProductsList}/>
    <Route path="login" component={Login}/>
    </Route>
  </div>
</Router>

Beware that the "div" is important, since the Router object can only have a child element

Here is a more complete example

answered by 04.01.2019 в 18:39

0

I recommend you to import it like that

import { createHistory } from 'history'
import {Router, Route, IndexRoute, IndexRedirect, Redirect, useRouterHistory} from 'react-router';

const browserHistory = useRouterHistory(createHistory)({
  basename: '/'
})

const history = syncHistoryWithStore(browserHistory, store);

answered by 03.03.2017 в 22:05

Detect when a text does not fit in a UI Label? MySQL join / inner join 3 tables

score 2 · Accepted Answer

2

The problem is not webpack, you are importing wrong the methods of reactrouter Try it like this

Import {Router, Route} from 'react-router'

answered by 23.02.2017 / 16:19

source