Is there any method to open page using a React Router v6 on button click

user_13151335 0
Viewed 7492

Here is the App.js file which will include the main page in which i have a single button of continue. The continue button will led a user to the home page but unfortunately instead of directing a user to the home page it is opening the homepage just after the Continue button

function App() {
  return (  
     <div className="App"  > 
  <MainPage/>
  <Routes>
          <Route path="home" element={<Home />} />
          <Route path="discover" element={<Discover />} />
          <Route path="shop/skincare" element={<SkinCare />} />
          <Route path="shop/fragnance" element={<Fragnance />} />
          <Route path="shop/makeup" element={<Makeup />} />
          <Route path="shop/hair" element={<Hair />} />
          <Route path="details" element={<DetailsPage />} />
          <Route path="bucket" element={<Bucket />} />     
</Routes>
  </div>
  );
}

export default App;

It is the MainPage component which just contain a background image and a conitnue button export default function MainPage() { return (

    <div>
       <div class="text-center" style={{padding:"22%"}}>
            <button type="button"  class="btn btn-secondary" style={{backgroundColor:"black"}}><Link to="home" style={{color:"white",textDecoration:"none"}}>Conitnue</Link></button>
            
          </div>
          </div>
   
  )
}
reactjs
2 Answers

Have you tried useNavigate? react-router v6 no longer use useHistory they replaced it with useNavigate.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

then

onClick={() => navigate('anypage')}
user_134239790

So the reason you see both your <MainPage /> and whatever your other page component is suppose to show, is because your <MainPage /> is not included in your Routes.

The way your component is placed makes it so no matter what the page is suppose to show, the <MainPage /> shows at the top. Typically, you place things like a navbar above your Routes so that it always renders at the top of your page.

To fix your code, I would just move <MainPage /> into your routers like so:

function App() {
    return (  
        <div className="App"  > 
            <Routes>
                <Route path="/" element={<MainPage />} />
                <Route path="home" element={<Home />} />
                <Route path="discover" element={<Discover />} />
                <Route path="shop/skincare" element={<SkinCare />} />
                <Route path="shop/fragnance" element={<Fragnance />} />
                <Route path="shop/makeup" element={<Makeup />} />
                <Route path="shop/hair" element={<Hair />} />
                <Route path="details" element={<DetailsPage />} />
                <Route path="bucket" element={<Bucket />} />     
            </Routes>
        </div>
    );
}

You should always place any pages you have in your app under your routes so that the proper page gets displayed on the url. In this case, because you have the path for the <MainPage /> be /, then this will be the landing page for your app (the first page they see).

For any redirecting or page switches, handle it as you did using <Link to... />

bonus: if you want to make sure you only have a single page loaded at a time, you could also wrap your Routes in a <Switch> statement and change the path to exact path :)

user_124031620
Related