Почему react-router-dom не работает в этом коде

Я изучаю приложение для реагирования и пытаюсь использовать react-router-dom. Я набрал «http://localhost:3000/» в браузере. Я ожидаю, что «Дом» отображается в браузере. Однако, когда браузер отображает этот код, ничего не отображается.

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <Routes>
            <Route exact path='/' component = {HomePage} />
            <Route path='/Contact' component = {ContactPage} />
            <Route path='/About' component = {AboutPage} />
            <Route component = {NotFoundPage} />
          </Routes>
        </BrowserRouter>
      </div>
    </>
  );
}

function HomePage() {
  return <h2>Home</h2>
}

function ContactPage() {
  return <h2>Contact</h2>
}

function AboutPage() {
  return <h2>About</h2>
}

function NotFoundPage() {
  return <h2>NotFoundPage</h2>
}

export default App;

Я понятия не имею, почему это не работает правильно.

reactjs react-router-dom

20.03.2022 04:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете маршрутизатор v6, вам нужно использовать реквизит element вместо component. Но что более важно, вам нужно создать экземпляр компонента (изменить element = {HomePage} на element = {< HomePage />}).

См. документы: https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <Routes>
            <Route exact path = "/" element = {<HomePage />} />
            <Route path = "/Contact" element = {<ContactPage />} />
            <Route path = "/About" element = {<AboutPage />} />
            <Route component = {<NotFoundPage />} />
          </Routes>
        </BrowserRouter>
      </div>
    </>
  );
}

function HomePage() {
  return <h2>Home</h2>;
}

function ContactPage() {
  return <h2>Contact</h2>;
}

function AboutPage() {
  return <h2>About</h2>;
}

function NotFoundPage() {
  return <h2>NotFoundPage</h2>;
}

export default App;

20.03.2022 04:24

Другие вопросы по теме

Как сделать данные MySQL ссылкой во внешнем интерфейсе с помощью Reactjs?

Динамическое связывание React Router Dom дает неверные данные

Прямой к базовому вложенному маршруту реагирования

Как реализовать свойство истории и передать его маршрутизатору... внутри index.tsx

Неработающие образы в новом React-Router-Dom V6

Redux useselector возвращает неопределенное значение, когда я пытался найти значение из массива состояний redux в соответствии с идентификатором useParams

Метод рендеринга не работает внутри корня

Нет маршрутов, соответствующих местоположению "/"

Как выполнять useEffect при каждом изменении выхода

Хук useLocation сохраняет состояния даже при жестком обновлении

Почему react-router-dom не работает в этом коде

Ответы 1

Другие вопросы по теме

Похожие вопросы