reactjs - Reactjs路由器4 - 无法读取未定义的属性路径名

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>

     )
 }

开发工具在“let wrapperClass = "gray-bg " + this.props.location.pathname;" 行中告诉错误

有任何想法吗？

标签： reactjsreact-router-v4

Answer 1

我刚刚找到了解决方案

在 config/route.js 中，我改为

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

希望它可以帮助别人