Реагировать JS - Маршрут - Недопустимый тип элемента

Question

Я новичок в React JS и пытаюсь реализовать что-то похожее на пример приложения Angular.

У меня есть таблица клиентов, и я хочу видеть выбранного клиента внизу таблицы.

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

// index.js 
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render((<BrowserRouter><App /></BrowserRouter>), document.getElementById('root'));
registerServiceWorker();


// App.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom/Route';

import Customers from './components/customers';
import Customer from './components/customer';

export default class App extends Component {
    state = {
    };

    render() {
        return (
            <React.Fragment>
                <Customers />
                <Route path={`/customer/:id`} component={Customer} />
            </React.Fragment>
        );
    }
}


// customers.jsx
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Customers extends Component {
    state = {
        customers: []
    };

    render() {
        return (
            <React.Fragment>
                <header className="jumbotron"><h1>Customer List</h1></header>

                <div className="container">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.customers.map(c => (<tr key={c.id}><td><Link to={`/customer/${c.id}`}>{c.name}</Link></td><td>{c.address}</td></tr>))}
                        </tbody>
                    </table>
                    <hr />
                </div>

                <footer className="footer">&copy; 2018</footer>
            </React.Fragment>
        );
    }

    async componentDidMount() {
        const result = await fetch('http://api.com/customers');
        const customers = await result.json();
        this.setState({ customers });
        console.log(this.state.customers);
    }
}


// customer.jsx
import React, { Component } from 'react';

export default class Customer extends Component {
    render() {
        return (<p>Customer</p>);
    };
}

Строка в App.js, которая добавляет Маршрут (Маршрут пути = {/customer/:id} компонент = {Клиент})вызывает ошибку.Если я удаляю эту строку, я вижу таблицу клиентов, но как только я добавляю эту строку, я получаю это сообщение об ошибке.

Я что-то упустил из-за того, как работает этот маршрутизатор?

Спасибо.

ОБНОВЛЕНИЕ

Событие, изменяющее App.js в этой очень простой версии, вызывает ошибку

import React, { Component } from 'react';
import { Route } from 'react-router-dom/Route';

export default class App extends Component {
    state = {
    };

    render() {
        return (
            <div>
                <Route exact path='/' render={() => (<h1>Hello</h1>)} />
                <Route exact path='/customer' render={() => (<h1>Customer</h1>)} />
            </div>
        );
    }
}

Полное сообщение об ошибке:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы смешали импорт по умолчанию и с именами.

Answer 1

Похоже, у вас есть синтаксическая ошибка в методе Customer компонента *1001*, которая будет вызывать проблемы при попытке использовать / визуализировать это.

Попробуйте следующее исправление:

export default class Customer extends Component {
    render() {
        return (<p> Customer</p>); // <-- remove the whitespace in 
                                   //     closing tag </p> like so
    };
}

Answer 2

измените это:

import {Route} from "react-router-dom/Route";

на это:

import Route from "react-router-dom/Route";

Маршрут является экспортом по умолчанию при прямом доступе к нему: "react-router-dom/Route" Вы можете использовать именованные экспорты при импорте Route из базового пакета

import {Route} from "react-router-dom";

Но не смешивайте два.

Answer 3

Мне кажется, проблема в обратном тике в пути. Можете ли вы попробовать с этим

    render() {
          return (
              <React.Fragment>
                   <Customers />
                   <Route path='/customer/:id' component={Customer} />
             </React.Fragment>
           );
      }

OR

    render() {
          return (
              <React.Fragment>
                   <Customers />
                   <Route path={'/customer/:id'} component={Customer} />
             </React.Fragment>
           );
      }