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：type无效 - 期望一个字符串（用于内置组件）或类/函数（用于复合组件）但得到：undefined。您可能忘记从文件中导出组件它的定义。检查App的渲染方法。

表示您正在尝试创建未定义的组件，并且正如错误所述 - 通常会在您忘记导出组件或导入的组件不存在时发生。

当有很多组件并且很难找到哪个是“坏”时，我在React代码中的console.error(message);放置一个断点并将堆栈跟踪转到函数createElement并且它的参数。通常它可以帮助我找出问题。

主要问题是您的代码与react-router @ 4不兼容。在此版本中，您无法同时将children和component传递给Route。此外，没有IndexRoute这样的内容，您应该使用BrowserRouter而不是Router，或者您应该传递history个对象。

查看文档：{{3}}

这是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')
    );
});

在React中导出/导入文件.jsx

1 个答案: