Question 72962 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why the address bar changes but i dont go to the page i want? – Reactjs

When i click on Mounth, only the address bar changes (into localhost:3000/subscription/Mounth) but i dont go to this page. Cant understand where is my mistake

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  element={<Layout/>}>
                <Route path="/" element={<Main/>}/>
                <Route path="subscription" element={<Subscription/>}>
                 <Route path="Mounth" element={<Mounth/>}/>
                </Route>
            </Route>
          </Routes>
          
        </>
    )
}

export default Root

Subscription.jsx

import { Link } from "react-router-dom"
import { Outlet } from "react-router-dom"
function Subscription(){
    return(
        <>
            <Outlet /> 
       
            <div className="main-content">
            <div className="container-primary">
                <div className="subscription-primary">
          
                    <form className="search-bar">
                        <input placeholder="Поиск" className="search-bar__input"/>
                    </form>
                    <h1 className="primary-title">Subscription</h1>
                    <h2 className="subscription-primary__title">Choose:</h2>
                    <ul className="subscription-primary__list">
                        <li className="subscription-primary__item">
                            <Link className="subscription-primary__link"  to="Mounth">
                                <div className="subscription-primary__bg">
                                    <span className="subscription-primary__mounth">1 month</span>
                                    <h3 className="subscription-primary__price">
                                        2499 ₽
                                    </h3>
                                </div>
                            </Link>
                        </li>
                    </ul>
             
                    <div className="promo">
                        <form className="promo__form" action="">
                            <input type="text" placeholder="" className="promo__field"/>
                            <button type="submit" className="promo__btn primary-btn">Accept</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

     
        </>
    )
}

When i want to go to Subscription page from Home page it works correctly, but doesnt from Subscription to Mounth, i use react-router-dom v6

Tags:

2

Answers


  1. 0

    You should place Mounth route inside Subscription route in order to make /subscription/mounth url work:

    <Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Main />} />
    <Route path="subscription" element={<Subscription />}>
      <Route path="mounth" element={<Mounth />} />
    </Route>
  </Route>
</Routes>

    Also don’t forget to add <Outlet /> inside Subscription.jsx so it will render the child route:

    function Subscription() {
  // Some code...

  return (
    <div>
      {/* Some code */}
      <Outlet />
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Make mounth a child of subscription route, a nested route:

    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="mounth" element={<Mounth/>}/>
                </Route>
            </Route>
          </Routes>
        </>
    )
}

export default Root
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search