Урок 10.3. Компонент Link
Приветствую.
Курс : React с нуля для начинающих + 3 проекта в портфолио!
Урок 10.3. Компонент Link
делаю все как в уроке сказано 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> меняется только адресная строка. Магия какая-то
