Ошибка предупреждения React останавливает компиляцию приложения

У меня есть следующее:

Компонент nav.jsx: (до этого момента все работало нормально)

import React from "react";
import Link from "react-router";

class Nav extends React.Component {
    render() {
        return (
            <ul>
                <li>
                    <Link to="/test1">test1</Link>
                </li>
                <li>
                    <Link to="/test2">test2</Link>
                </li>
            </ul>
        );
    }
}

export default Nav;

компонент маршрутов следующим образом:

маршруты.js

import React from "react";
import { Route, Router, IndexRoute } from "react-router";
import ReactDOM from "react-dom";

import App from "./index.jsx";
import Test1 from "./test1.jsx";
import Test2 from "./test2.jsx";

ReactDOM.render(
    <Router>
        <Route path="/" component={App} />
        <Route path="/test1" component={Test1} />
        <Route path="/test2" component={Test2} />
    </Router>,
    document.getElementById("app")
);

и такой index.jsx:

import React from "react";
import { render } from "react-dom";

import Nav from "./nav.jsx";

class App extends React.Component {
    render() {
        return (
            <div>
                <Nav />
                <p> Hello React!</p>
            </div>
        );
    }
}

export default App;

однако я получаю следующую ошибку в консоли:

invariant.js:38 Неперехваченное нарушение инварианта: Недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Проверьте метод рендеринга Nav.

Все работало нормально, пока я не добавил компонент Nav...

введите здесь описание изображения


webpack reactjs javascript jsx
person Alessandro    schedule 11.08.2016    source источник
comment
Вы импортировали React в свой компонент Nav?   -  person Martin    schedule 11.08.2016
comment
Да, у меня есть импорт React из «реакции»;   -  person Alessandro    schedule 11.08.2016
comment
И он строится без компонентов ссылки в методе рендеринга?   -  person Martin    schedule 11.08.2016
comment
вообще не отображается, пустой экран   -  person Alessandro    schedule 11.08.2016
comment
Можешь попробовать import { Link } from 'react-router' вместо import Link from 'react-router';   -  person HiDeo    schedule 11.08.2016
comment
Рендер тоже импортируется? Ошибка при его построении? Попробуйте удалить компоненты ‹Link /› и посмотрите, отобразится ли он. Я думаю, что, возможно, /test1 и /test2 не существуют   -  person Martin    schedule 11.08.2016

Ответы (2)


arrow_upward
4
arrow_downward 

import {Link} from 'react-router'

Выше должен делать свою работу. Можете ли вы попробовать один раз?

person Harkirat Saluja    schedule 11.08.2016
comment
да, это так... Я новичок в React... почему это решило проблему? - person Alessandro; 11.08.2016
comment
Да, конечно. Вы можете проверить это здесь stackoverflow.com/ вопросы/31096597/ - person Harkirat Saluja; 11.08.2016

arrow_upward
1
arrow_downward

Не могли бы вы попробовать со следующим

Также обратите внимание на https://github.com/reactjs/react-router/blob/master/docs/Introduction.md

import React from 'react';
import {render} from 'react-dom';

import Nav from './nav.jsx';

class App extends React.Component {
  render () {
    return (
      <div>
        <Nav />
        <p> Hello React!</p>
        {this.props.children}
      </div>
    );
  }
}

export default App;
person agriboz    schedule 11.08.2016