Почему не работает react-router-dom?

Question

[Нурислам Нагашыбай]

Пытаюсь сделать простую маршрутизацию, чтоб когда нажимаешь на ссылку Dialogs страница отображала Dialogs, нажимаешь на ссылку Profile отображалась на месте Dialogs Profile, но когда вставляю Route в App.js страница попросту ничего не показывает, чисто белый фон.
вот файл App.js

import React from 'react';
import './App.css';
import {Router,Route} from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Profile from './components/Profile/Profile';
import s from './components/Header/Header.module.css';
import Dialogs from './components/Dialogs/Dialogs';

function App() {
  return (
      <Router>
          <div className="App-wrapper">
              <header className={s.Header}>
                  <img className={s.logo} src='https://avatars.mds.yandex.net/i?id=88b5d56ab1e2969c8c7ada7728e6ce5b-5880151-images-thumbs&n=13' alt='Это ссылка'/>
              </header>
              <Nav />
              <div className='app-wrapper-content'>
                  <Route path='/Dialogs' component={Dialogs} />
                  <Route path='/Profile' component={Profile} />
              </div>
          </div>
      </Router>
  );
}

export default App;

Comments

[Нурислам Нагашыбай]

низкомолекулярный макрос, даже если бы напутал то все ровно страница только белый фон отображает

Answer 1

[Рома Зварич]

страница попросту ничего не показывает, чисто белый фон

В подобных ситуациях ещё неплохо бы в консоль заглядывать.
Там ошибки могут вываливаться.

Ошибки, которые заметил

Ошибка №1:
Из библиотеки `react-router-dom` импортируется не `Router`, а `BrowserRouter`
Но для удобства его можно импортировать, переименовав в `Router`
Как у Вас:
import {Router,Route} from 'react-router-dom';
Как должно быть

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

Ошибка №2
Компоненты `Route` нужно помещать внутрь компонента `Routes`
Сначала его нужно импортировать

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

Потом в него нужно вложить компоненты `Route`

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>}/>
      <Routes/>
    </Router>
  );
}

Ошибка №3
В компоненте `Route` нужно указывать атрибут/проп не `component`, а `element`
Как у Вас:
<Route path='/Dialogs' component={</Dialogs>} />
Как должно быть:
<Route path="/dialogs" element={Dialogs}/>

Comments

[Нурислам Нагашыбай]

Спасибо теперь хоть белого фона нету, теперь надо разобраться почему Route не работает

[Alexandroppolus]

<Route path="/dialogs" element={<Dialog />} />

[Рома Зварич]

Alexandroppolus, да, точно. Я допустил ошибку.
Спасибо за уточнение.
Обновил ответ

[MikhaChe]

Тоже в похожую проблему уперся.

Спасибо за разъяснение, Рома Зварич, добрый человек! :)