Столкнулся с необычной проблемой в React Router, я прописал локальным ссылкам {link} и указал куда динамически при клике должна переходить ссылка(на другую страницу), в адресной строке url меняется корректно, но без принудительной перезагрузки страница не меняется. То есть, при клике url меняется правильно, но нужно обновить страницу, что бы перейти по ссылки. Ошибок в консоли нет.
App.js
import Header from "./components/Header/Header"
import Articles from "./components/Articles/Articles.jsx"
import {
BrowserRouter as Router, Switch as
Routes,
Route
} from "react-router-dom"
import About from "./padge/About"
function App() {
return (
<div>
<Router>
<Header />
<Routes>
<Route exact path="/">
<Articles />
</Route>
<Route path="/About" element={<About />}>
<About />
</Route>
</Routes>
</Router>
</div>
);
}
Header.jsx
введите сюда код
About.jsx
import React from 'react'
import { Link } from 'react-router-dom'
export const About = () => {
return (
<div style={{ padding: '20px' }}>
About compani
<Link to="/">Back to Home</Link>
</div>
)
}
export default About
header.jsx
import React from 'react'
import LogoImg from '../../assets/img/Logo.svg'
import { menu } from './menu'
import styles from './Header.module.scss'
import { Link } from 'react-router-dom'
const Header = () => {
return (
<div className={styles.header}>
<div className={styles.logo}>
<img src={LogoImg} alt="logo" className={styles['logo__img']} />
</div>
<div className={styles.wrapper}>
<ul className={styles.menu}>
{menu.map((item, index) =>(
<li key={`menu item ${index}`}>
<Link to={item.link}>{item.title}</Link>
</li>
))}</ul>
<div className={styles.buttons}>
<button className={styles['login-up']}>Login</button>
<button className={styles['sing-up']}>Sing up</button>
</div>
</div>
</div>
)
}
export default Header