Не удается заставить работать маршрутизатор React "InvalidCharacterError"

Question

Последние два часа я буквально дергал себя за волосы, пытаясь заставить этот простой кусок кода работать.

Независимо от того, что я даю компоненту Route, он дает мне InvalidCharacterError, Не удалось выполнить 'createElement'на «Документ».

Все работает, когда я удаляю маршрут, компонент Home работает сам по себе.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import './App.css';

function App() {
  return (
    <Router>
      Hello !
      <Route path="/" exact component="{Home}" />
    </Router>
  );
}

const Home = () => (
  <div>
    <h1>This is the home.</h1>
  </div>
)

export default App;

Это ошибка:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('{Home}') is not a valid name.

Answer 1

Вы делаете это неправильно, вы передаете компонент как неверную строку, вам нужно передать его как компонент. Для справки см. Документацию реагирующий маршрутизатор .

Обратитесь к этой песочнице для справки

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import './App.css';

function App() {
  return (
    <Router>
      Hello !
      <Route path="/" exact component={Home} />
    </Router>
  );
}

const Home = () => (
  <div>
    <h1>This is the home.</h1>
  </div>
)

export default App;