Маршрутизация в React

Помогите разобраться с React Rooting. Есть код:

import React from "react";
import { Link, NavLink } from "react-router-dom";
import n from './Nav.module.css'

const Nav=()=>{
    return(
        <div className={n.nav}>
             <Link to='/news'>Новости</Link>

              {/* <ul className={n.list__items}>
                <li className={n.nav__item}>
                    <Link to="/news">Новости</Link></li>
                <li className={n.nav__item}>
                    <Link to='/profile'>Мой профиль</Link></li>
                <li className={n.nav__item}>
                    <Link to='/tasks'>Задания</Link></li>
                <li className={n.nav__item}><Link to='/post'>Статьи</Link></li> 
                <li className={n.nav__item}><Link to='/forum'>Форум</Link></li> 
            </ul> */}
        </div>
    );
}
export default Nav;
import './App.css';
import Header from './Components/Header/Header';
import Nav from './Components/Nav/Nav';
import Footer from './Components/Footer/Footer';
import Profile from './Components/Profile/Profile'
import News from './Components/News/News'
import Tasks from './Components/Tasks/Tasks';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Forum from './Components/Forum/Forum';
import Home from './Components/Home/Home';
import Post from './Components/Post/Post';


const App = () => {
  return(
    <div className="app-wrapper">
      <Header/>
        <Nav/>
          <div className='wrapper__content'>
            <BrowserRouter>
              <Routes>
                <Route path='/' element={<Home/>}/>
                <Route path='/home' element={<Home/>}/>
                <Route path='/profile' element={<Profile/>}/>
                <Route path='/news' element={<News/>}/>
                <Route path='/tasks' element={<Tasks/>}/>
                <Route path='/post' element={<Post/>}/>
                <Route path='/forum' element={<Forum/>}/>  
              </Routes>        
          </BrowserRouter>  
          </div>
        <Footer/> 
    </div>
    );
}
export default App;

Что я не так делаю?


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

Автор решения: Radik

BrowserRouter не в компоненте App а выше в файл index оберни и в компоненте Nav используй вместо Link NavLink "react-router-dom": "^6.0.2",если стоит версия то можно писать без слеша

в App файле <Route path="post" element={<PostComponents/>}/>

в Nav файле <NavLink to={'/post'}> Post </NavLink>

→ Ссылка
Автор решения: isma.teem

Все правильно, просто вы не обернули компонент <Nav /> внутрь <BrowserRouter></BrowserRouter>

→ Ссылка