Question

我正在研究现在的反应，所以我正在与你的世界反应项目合作。

但是当我成功编译项目时，我在Route的组件参数中得到了一个未定义的值，下面的代码来自Firefox中的ReactDevTool：

<HashRouter>
    <Router history={length:5, action: 'POP', location: {_}, _}
        <Route exact=true path='/' compenent=undefined></Route>
    </Router>
</HashRouter>

这是我的目录结构：

$ tree src/foreground/
src/foreground/
├── app.js
├── components
├── containers
│   └── Navigator
│       └── index.js
├── index.html
└── routes

条目文件，app.js：

$ cat src/foreground/app.js
import React from 'react';
import { render } from 'react-dom';

import { HashRouter, Route } from 'react-router-dom';
import { View as Navigator } from './containers/Navigator';

render(
    <HashRouter>
        <Route exact path="/" component={Navigator} />
    </HashRouter>,
    document.getElementById('app')
);

容器导航器：

$ cat src/foreground/containers/Navigator/index.js
import React, { Component } from 'react';

class View extends Component {
    render() {
        return (
            <div>
                sdfsdf
                <hr />
            </div>
        );
    }
}

export default View;

我希望网页是 hr行，其上方有'sdfsdf' 。但实际上，我有一个空网页。

问题：如何获得我期待的网页？

Answer 1

您正在使用已命名的导入导入Navigator，但它已导出为默认导出，因此您需要导入默认导出：

import Navigator from './containers/Navigator';

或导出View中的Navigator/index.js：

export class View extends Component {..}

react-router-dom的组件参数有未定义的值

1 个答案: