0

Столкнулся с необычной проблемой в 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

1 ответ 1

0

Столкнулся с такой же проблемой. Новый реакт не работает со старой версией (в моём случае была версия 5.3.0) роутера. Помогла установка последней версии роутера

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.