How to use BrowserreRouter nad useNavigate in React App

My Portfolio

WordPress, PHP, Html, jQuery, CodeIgnitor, ReactJS, AWS, Rest API and Design

I have completed above 100 projects can you look at portfolio

Portfolio

Step 1: Follow the steps in this link https://reactjs.org/docs/create-a-new-react-app.html

npx create-react-app my-app
cd my-app
npm start

Step 2: Install the react DOM package. npm i react-router-dom https://www.npmjs.com/package/react-router-dom

Step 3: Modify the App.js

import './App.css';

import Error from './Pages/Error';
import About from './Pages/About';
import Products from './Pages/Products';
import Contact from './Pages/Contact';

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

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/about">About</Link>
        <Link to="/products">Products</Link>
        <Link to="/contact">Contact</Link>
        <Routes>
          <Route path='/*' element={<Error />} />
          <Route path='/about' element={<About />} />
          <Route path='/products' element={<Products />} />
          <Route path='/contact' element={<Contact />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Step 4: Make 4 pages inside of the src folder About.js, Contact.js,Products.js and Error.js

Step 5: About.js

import React from 'react';
import { useNavigate } from 'react-router-dom';
function About(props) {
    const navigate = useNavigate();
    return (
        <div>
            About-
            <button onClick={()=>navigate('/products')}>Go to products</button>
        </div>
    );
}

export default About;

Step 6: Contact.js

import React from 'react';

function Contact(props) {
    return (
        <div>
            Contact
        </div>
    );
}

export default Contact;

Step 7: Product.js

import React from 'react';

function Products(props) {
    return (
        <div>
            Products
        </div>
    );
}

export default Products;

Step 7: Error.js

import React from 'react';

function Error(props) {
    return (
        <div>
            Not found page
        </div>
    );
}

export default Error;

Error.js is run when page not found

Finally run the app npm start

About author
Generic placeholder image
Vadivel A

I love WordPress, Woo-Commerce, PHP, CodeIgnitor, JavaScript, Rest API and HTML/CSS so much. 6 yrs of experience.