Reactjs router 4 - 无法读取Undefined的属性路径名

Question

我知道这个问题很多次，但我无法得到正确的答案，只是创建一个小项目来学习reactjs

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>

     )
 }

开发工具告诉行中的错误，“让wrapperClass =”gray-bg“+ this.props.location.pathname;”

有任何想法吗？

Answer 1

尝试使用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>

 )
}

没有试过，但听起来这个问题可能是一个导入问题。如果有效，请告诉我。

Answer 2

我刚刚找到解决方案

在config / route.js中，我改为

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

希望它能帮助别人