Reactjs router 4 - невозможно прочитать путь к файлу свойства Undefined

Question

Я знаю, что этот вопрос задавали много раз, но я не могу получить правильный ответ, просто создаю небольшой проект, чтобы выучить реагировать

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './config/routes';

import jquery from 'jquery';
import metismenu from 'metismenu';
import bootstrap from 'bootstrap';

import '../../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../../../node_modules/font-awesome/css/font-awesome.css'
import '../../../../node_modules/animate.css/animate.min.css'
import '../../css/style.css'

ReactDOM.render(
  <Router>{routes}</Router>,
     document.getElementById('indo')
);

конфиг / routes.js

import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';

import MainView from '../views/Main';
import MinorView from '../views/Minor';

// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';

export default (
  <Router>
    <Route path="/">
        <Main>
            <Route path="/main" />
            <Route path="main" component={MainView}> </Route>
            <Route path="minor" component={MinorView}> </Route>
        </Main>
    </Route>
  </Router>

 );

вот мой Main.js, источник ошибки

import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';

class Main extends React.Component {

   render() {
      let wrapperClass = "gray-bg " + this.props.location.pathname;
      return (
         <div id="wrapper">
            <Progress />
            <Navigation location={this.props.location}/>

            <div id="page-wrapper" className={wrapperClass}>

                <TopHeader />

                {this.props.children}

                <Footer />

            </div>

        </div>

     )
 }

Инструменты разработчика сообщают об ошибке в строке: "let wrapperClass =" grey-bg "+ this.props.location.pathname;"

Есть идеи?

Answer 1

Я только что нашел решение

в config / route.js, я изменил на

<Router>
    <div>
        <Route path="/" component={Main}/>
        <Route path="main" component={MainView}/>
        <Route path="minor" component={MinorView}/>
    </div>
</Router>

Надеюсь, что это помогает другим

Answer 2

Попробуйте использовать import {MainView} вместо импорта MainView. Также добавьте экспорт в начале объявления класса MainView.

как класс экспорта MainView расширяет React.Component ...

изменения должны привести к следующему результату:

route.js:

import React from 'react'
import Main from '../layouts/Main';
import Blank from '../layouts/Blank';

import {MainView} from '../views/Main';
import {MinorView} from '../views/Minor';

// import { Router, IndexRedirect} from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';

export default (
  <Router>
   <Route path="/">
    <Main>
        <Route path="/main" />
        <Route path="main" component={MainView}> </Route>
        <Route path="minor" component={MinorView}> </Route>
    </Main>
</Route>

);

Main.js:

import React from 'react';
import Progress from '../common/Progress';
import Navigation from '../common/Navigation';
import Footer from '../common/Footer';
import TopHeader from '../common/TopHeader';
import { correctHeight, detectBody } from './Helpers';

export class MainView extends React.Component {

render() {
  let wrapperClass = "gray-bg " + this.props.location.pathname;
  return (
     <div id="wrapper">
        <Progress />
        <Navigation location={this.props.location}/>

        <div id="page-wrapper" className={wrapperClass}>

            <TopHeader />

            {this.props.children}

            <Footer />

        </div>

    </div>

 )
}

Не пробовал, но мне кажется, что проблема может быть связана с импортом. Дайте мне знать, если это работает.