react中的导出/导入文件.jsx

Question

我最近尝试在react中制作单独的文件.jsx。我用export default name/import name from ./name.jsx'制作了几个。但是有问题。首先，我从 react-router导入路线和链接，并说它找不到链接，我在stackoverflow上找到了将其更改为 react-router-dom，所以我做到了，现在控制台说我忘记了导出一些组件。我找不到解决方案:(任何人可以帮我吗？

这是我的项目：

https://github.com/tafarian/portfolio

import React from 'react';
import ReactDOM from 'react-dom';
import './../css/style.scss';
import {
    Router,
    Route,
    Link,
    IndexLink,
    IndexRoute,
    hashHistory
} from 'react-router-dom';
import Template from './Template.jsx'
import Projects from './Projects.jsx'
import Home from './Home.jsx'
import AboutMe from './AboutMe.jsx'
import Contact from './Contact.jsx'

Answer 1

等错误

"警告：react.Createelement：类型是无效的 - 预期的字符串(用于内置组件(或类/函数(用于复合组件(，但got：undefined。您可能忘记了从文件中导出组件它已定义。检查App的渲染方法。

意味着您正在尝试创建一个未定义的组件，正如它在错误中所说的那样 - 通常，当您忘记导出组件或不存在导入的组件时，这种情况就会发生。

当有很多组件时，很难找到哪个是"坏"，我在react代码中将断点放在 console.error(message);上，然后将stacktrace升至函数 createElement及其参数。通常它可以帮助我识别问题。

主要问题是，您的代码与React-Router@4不兼容。在此版本中，您不能同时将children和component传递给Route。另外，没有IndexRoute这样的东西，您应该使用BrowserRouter而不是Router，否则您应该通过history对象。

看看文档：https：//reacttraining.com/reaect-router/web/guides/philosophy

这是yout app.jsx的固定版本：

import React from 'react';
import ReactDOM from 'react-dom';
import './../css/style.scss';
import {
    BrowserRouter,
    Route,
    Link,
    hashHistory
} from 'react-router-dom';
import Template from './Template.jsx'
import Projects from './Projects.jsx'
import Home from './Home.jsx'
import AboutMe from './AboutMe.jsx'
import Contact from './Contact.jsx'
document.addEventListener('DOMContentLoaded', function(){
    class App extends React.Component {
        state = {
            loading: true,
        };
        componentDidMount() {
            setTimeout(() =>
                this.setState({
                    loading: false
                }), 2500);
        }
        render() {
            if(this.state.loading === true) {
                return (
                    <div id="preloader">
                        <div id="loader"></div>
                    </div>
                )
            }
            return(
                <BrowserRouter history={hashHistory}>
                    <Template>
                        <Route exact path="/" component={Home} />
                        <Route path='/aboutme' component={AboutMe} />
                        <Route path='/projects' component={Projects} />
                        <Route path='/contact' component={Contact} />
                    </Template>
                </BrowserRouter>
            )
        }
    }
    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
});