Как сделать переход по страницам в React js

Question

Я хочу сделать, чтобы с основной страницы я переходил на episodes. в App.jsx я сделал вот так

mport React, { useState } from 'react';
import './App.css';
import './AudioPlayer';
import AudioPlayer from './AudioPlayer';
import episodes from './episodes';
 import {
   BrowserRouter as Router,
   Routes,
   Route,   Link,
} from "react-router-dom";


function Header() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };
  return (
    <header className="header">
      <div className="header-content">
        <h3 className="site-title">CastPress.</h3>
        <Router> 
        <nav className="nav-container">
          <ul className='buttons'>
            <li><Link to='/episodes'>episodes</Link></li>

          </ul>
        </nav> 
        <Routes>
                <Route path="/episodes" element={<episodes/>}/>
        </Routes> 
        <div className="search-bar">
          <input type="text" placeholder="Поиск..." value={searchTerm} onChange={handleSearchChange} />
          <button className='search-button'>Найти</button>
        </div>
        </Router> 
      </div>
      <hr></hr>
    </header>
  );
}
export default Header;

а в episodes.jsx

import React from 'react';

function episodes (){
    return (
      <div>Episodes page</div>
    );
  }

export default episodes;

при нажатии на episodes на сайте, ничего не происходит. что делать?

Answer 1

при нажатии на episodes на сайте, ничего не происходит. что делать?

Поставил Реакт с нуля, используя Vit... Потом поставил react-router-dom v7... Посмотрел как там делаются роутинги https://reactrouter.com/start/library/routing

Написал вот такую программульку - все работает и переходит.

import { useState } from 'react'
import { BrowserRouter, Routes, Route, NavLink, Link, Outlet  } from "react-router"
//import './App.css'

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route element={<Dashboard />}>
                <Route index element={<Home />} />
                <Route path="episodes" element={<Episodes />} />
            </Route>
        </Routes>
   </BrowserRouter>
  )
}
//
function Dashboard() {
    return <div>
        <Header />
        <hr />
        <Outlet />
    </div>
}
//
function Header() {
    return (
      <nav>
        <NavLink to="/">Home</NavLink>
        {' | '}
        <Link to="/episodes">Episodes</Link>
      </nav>
    );
  }
//
function Episodes() {
    return <div>Episodes
    </div>
}
//
function Home() {
    return <div>Home
    </div>
}

export default App

БЛОГ НА HUSL

Как сделать переход по страницам в React js

Ответы (1 шт):