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

Question

i recently tried to make separate files .jsx in React. I made couple of them with export default name / import name from ./name.jsx' . But there comes problem. First i had imported Route and Links from react-router and console said it can't find Links , i found on stackoverflow to change it to react-router-dom , so i did it, and now console says i forgot to export some components . I can't find solution :( Could anyone help me ?

Here's my project :

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

Such error as

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of App .

means that you are trying to create an undefined component, and as it said in error - usually this happens when you forget to export component or the component that you are importing does not exist.

When there is a lot of components and it's hard to find which one is "bad" I place a breakpoint at console.error(message); in React code and go up the stacktrace to the function createElement and it's arguments. Usually it helps me to identify the problem.

The main problem, is that your code is not compatible with react-router@4. In this version you can not pass children and component to Route at the same time. Also, there is no such a thing as IndexRoute and you should use BrowserRouter instead of Router , or you should pass an history object.

Take a look at the documention: https://reacttraining.com/react-router/web/guides/philosophy

And here is fixed version of 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')
    );
});