Урок 10.3. Компонент Link

Приветствую.

Курс : React с нуля для начинающих + 3 проекта в портфолио!

делаю все как в уроке сказано 1 в 1.

но когда я нажимаю на "Link" меняется только адрес в строке браузера, а роутинга (измения страницы) не происходит. уже весь инет прошерстил, хз вообще что делать.

Все пишут как у меня 1 в 1 и у них работает почему-то.

вот код их App.js

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {Footer} from './Components/Footer';
import {Header} from './Components/Header';
import {About} from './pages/About';
import {Contact} from './pages/Contact';
import {Home} from './pages/Home';
import {NotFound} from './pages/NotFound';

function App() {
return (
<>
<Router>
<Header/>
<main className='container content'>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</main>
<Footer />
</Router>
</>
);
}

export default App;

а вот собственно код их Header.jsx т.е там где и прописаны "Link":

import {Link} from 'react-router-dom';

function Header() {
return <nav className="myHeader" style={{height: "194px", lineHeight: "85px"}} >
<div className="nav-wrapper">
<Link to="/" className="brand-logo" style={{color: "aqua"}}>React SPA Food</Link>
<ul id="nav-mobile" className="right hide-on-mes-and-down">
<li>
<Link to="/about">Abouts</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</nav>
}

export {Header}

хз вообще что делать.

до этого вообще ничего не работало так как стояла новая версия react-router-dom 6.4.1, но в проекте используется 5.2.0. Я установио 5.2.0 по переходу в адресной строке если ввести "/", "/about", "/contact" - страницы переходят если нажать Enter. Так же при использовании обычных <a href=""></a> - все переходит с перезагрузкой, а вот по <Link to=""></Link> меняется только адресная строка. Магия какая-то

Иван Фурашов

2 years ago

3 ответов