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')
);

config / 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>

     )
 }

Dev工具在该行中告诉错误，“ let wrapperClass =“ gray-bg” + this.props.location.pathname;“

有什么想法吗？

Answer 1

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

希望对别人有帮助

ReactJS Router 4-无法读取未定义的属性路径名

2 个答案: