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

Reactjs – React app: redirect a page to another page

I am working on a web application using React.
I’m struggling to redirect a page to another.
When I press the button, I can see the direction of the page change, but there is no actual change in the content of the page.

This this my code:

import {useNavigate} from 'react-router-dom';



function App() {
  const navigate = useNavigate();

 
  const anotherPage = () => navigate("/Troubleshooting");

  return (
    <div className="App">
    
    <Button onClick={anotherPage} variant="primary">
                  <Link to="/Troubleshooting"></Link>
                 
                  Get Started

                  </Button>

);
}
Tags:

2

Answers


  1. 0

    This should properly trigger the navigation to the "Troubleshooting" page when the "Get Started" button is clicked. If the content of the page isn’t changing, ensure that the "Troubleshooting" route is correctly set up in your routing configuration

    import { useNavigate } from 'react-router-dom';
import Button from 'react-bootstrap/Button';

function App() {
  const navigate = useNavigate();

  const anotherPage = () => navigate("/Troubleshooting");

  return (
    <div className="App">
      <Button onClick={anotherPage} variant="primary">
        Get Started
      </Button>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    The routing is correct, for the content to change when it is being navigated, you have to make sure whether you declare the ‘createBrowserRouter’ and add objects to that array like the below code.

    import { createBrowserRouter} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/Troubleshooting",
    element: (
      <div>
        <h1>Troubleshoot component goes here</h1>
      </div>
    ),
  }]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search