Почему React-Router не отображает маршрут, когда я добавляю его путь в конец URL-адреса localhost:3000?

В React-Router-DOM 6 все маршруты точно совпадают по пути, а рендеринг корневого "/" маршрута App не позволяет сопоставлять дочерние маршруты.

Вы можете решить эту проблему, добавив подстановочный знак/splat"*" к корневому маршруту:

<Route path = "/*" element = {<App />} />

Это позволяет также сопоставлять дочерние маршруты.

Тем не менее, этот корневой маршрут вообще бесполезен, вам нужно просто визуализировать App непосредственно под BrowserRouter, и тогда компоненты Routes и Route, отображаемые App, будут работать как маршруты корневого уровня.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

function App() {
  return (
    <div className = "App">
      <Header />
      <Nav />
      <Routes>
        <Route path = "/" element = {<Home />} />
        <Route path = "post" element = {<NewPost />} />
        <Route path = "post/:id" element = {<PostPage />} />
        <Route path = "about" element = {<About />} />
        <Route path = "*" element = {<Missing />} />
      </Routes>
      <Footer />
    </div>
  );
}

В вашем файле index.tsx это должно выглядеть так:

ReactDOM.createRoot(
  document.getElementById('root'))
  .render(<App />);

и в вашем App.tsx это должно выглядеть так:

import Header from './Header';
import Nav from './Nav';
import Footer from './Footer';
import Home from './Home';
import NewPost from './NewPost';
import PostPage from './PostPage';
import About from './About';
import Missing from './Missing';
import { BrowswerRouter as Router, Route, Routes, useHistory } from 'react-router-dom';
import { useState, useEffect } from 'react';

function App() {
  return (
    <div className = "App">
      <Header />
      <Nav />
      <Router>
        <Routes>
          <Route path = "" element = {<Home />} />
          <Route path = "post" element = {<NewPost />} />
          <Route path = "post/:id" element = {<PostPage />} />
          <Route path = "about" element = {<About />} />
          <Route path = "*" element = {<Missing />} />
        </Routes>
      </Router>
      <Footer />
    </div>
  );
}

Обратите внимание: я импортировал BrowserRouter as Router из react-router-dom.

Похоже, есть небольшая проблема с настройкой маршрутов в вашем приложении React. Вот почему вы видите пустой экран при попытке перейти на определенные страницы.

Измените путь маршрута в App.js:

У вас есть эта строка в вашем App.js:

<Route path = "" element = {<Home />} />

Путь пуст, что может вызвать проблемы. Измените его на / вот так:

 <Route path = "/" element = {<Home />} />

В вашем index.js вы оборачиваете свой компонент приложения как маршрутами, так и маршрутами. Вам это не нужно, поскольку вы уже настроили маршруты в App.js. Итак, просто оберните приложение с помощью Router следующим образом:

ReactDOM.createRoot(
  document.getElementById('root'))
  .render(
    <Router>
      <App />
    </Router>
);

Если у вас по-прежнему возникают проблемы, посмотрите консоль в браузере. Они могут сказать вам, что происходит не так.