Задать вопрос
@SamPorter

Не работает react-router-dom, в чём ошибка?

Когда нажимаю на ссылку, адресная строка меняется но страница на которую я перешёл полностью пустая или же не переходит. Не могу понять в чём проблема. Вот как выглядит адресная строка
localhost:3000/subscription/Mounth

Root.jsx

import { Route, Routes } from "react-router-dom"
import Layout from "../Layout/Layout"
import Main from "../Main/main"
import Subscription from "../Subscription/subscription"
import Mounth from "../Subscription/Mounth"


function Root(){
    return(
        <>
          <Routes>
            <Route path="/" element={<Layout/>}>
                <Route path="/" element={<Main/>}/>
                <Route path="subscription" element={<Subscription/>}/>
                <Route path="SubscriptionSettingoneMounth" element={<SubscriptionSettingoneMounth/>}/>
            </Route>
          </Routes>
        </>
    )
}

export default Root

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Root from './Components/Root/root';
import './Components/assets/css/style.min.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router>
       <Root/> 
    </Router>
);


Layout.jsx

import { Outlet } from "react-router-dom"
import Footer from "../Footer/Foote"
import Navbar from "../Navbar/navbar"


function Layout(){
    return(
        <div className="content-wrapper">
            <Navbar/>
            <Outlet/>
            <Footer/>
        </div>
    )
}
export default Layout
  • Вопрос задан
  • 243 просмотра
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Merion Academy
    Frontend-разработка на React
    4 месяца
    Далее
  • ProductStar
    React: отточите навыки интерфейсной разработки
    6 недель
    Далее
Пригласить эксперта
Ответы на вопрос 3
IceRD
@IceRD
Попробуй заменить <Route path="/" element={<Layout/>}> на <Route element={<Layout/>}>
Ответ написан
barsuk23013
@barsuk23013
Памагити
Попробуйте обернуть в браузер роутер
641d62643de06480390552.jpeg
Ответ написан
Комментировать
@SamPorter Автор вопроса
Решение: Надо было просто обернуть Mounth в Subscription

<Route path="subscription" element={<Subscription/>}>
                 <Route path="Mounth" element={<Mounth/>}/>
</Route>


Но и это вызвало другую проблему, ссылка перестаёт работать почему то либо после определённого времени либо после определённого количество кликов на неё, меняется только адресная строка, но на страницу не переходит
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽
ITK academy Казань
от 50 000 до 90 000 ₽