Only main page renders on React Router v6-CodePudding

I have a project with the following code in app:

 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Guide from './components/guide/Guide';
import '@stripe/stripe-js';
import Success from './components/buy_tab/Success';
import Cancel from './components/buy_tab/Cancel';

function App() {
  return (
   <>
   <Router>
    <Routes>
      <Route path ='/' element = {<Home/>} />
      <Route path = '/success' element = {<Success />}/>
      <Route path = '/cancel' element = {<Cancel />}/>
      <Route path = '/cart' element = {<Guide/>} />
    </Routes>
   </Router>
   </>
  );
}

export default App;

But the only route that works is the one with '/'. I have tried setting the other components with the route '/' and they work fine, but when the route is other it doesnt work, it only renders a white page. Thank you,

Edit: I have tried removing the components and instead putting h1 tags, and it worked. It only stops working when I set the element of the first route to my home component, which looks like this:

import './styles/App.css';
import Header from './components/header/Header';
import Image from './components/image_top/Image';
import Introduction from './components/introductory_text/Introduction';
import Video from './components/video/Video';
import DescriptionCarousel from './components/card_display/Description-carousel';
import { useState } from 'react';
import NavBar from './components/buy_tab/buy-tab';

function Home() {

    const [buyTab, setBuyTab] = useState(false);

    return (
        <div className='main'>
            <NavBar setBuyTab = {setBuyTab} buyTab = {buyTab}/>
            <Header  setBuyTab = {setBuyTab} buyTab = {buyTab}/>
            <Image/>
            <Introduction />
            <DescriptionCarousel />
            <Video />
        </div>
    );
}

export default Home;

CodePudding user response：

Can you please check if this simple implementation works for you?

import './App.css';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path='/' element={<h1>Home</h1>} />
          <Route path='/success' element={<h1>Success</h1>} />
          <Route path='/cancel' element={<h1>Cancel</h1>} />
          <Route path='/cart' element={<h1>Cart</h1>} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

I have tested this with Create React App and React Router v6.3.0 so I think it might be a problem with the imported components.

CodePudding user response：

On React router v6 all paths match exactly by default. It means that route with path '/' will match all routes (because all routes start from '/').

Place route with path '/' at the end.

<Routes>
  <Route path='/success' element={<Success />}/>
  <Route path='/cancel' element={<Cancel />}/>
  <Route path='/cart' element={<Guide/>} />
  <Route path='/' element={<Home/>} />
</Routes>

CodePudding user response：

I created a sandbox and it is working.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Guide from "./components/guide/Guide";
import Success from "./components/buy_tab/Success";
import Cancel from "./components/buy_tab/Cancel";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/success" element={<Success />} />
          <Route path="/cancel" element={<Cancel />} />
          <Route path="/cart" element={<Guide />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;