@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
  • Вопрос задан
  • 200 просмотров
Пригласить эксперта
Ответы на вопрос 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>


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

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

Похожие вопросы
23 нояб. 2024, в 23:03
1 руб./за проект
23 нояб. 2024, в 22:38
2500 руб./за проект
23 нояб. 2024, в 22:03
3000 руб./за проект