Маршрутизация в 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>