React Router dom install and setup for react 18

 1. Install React Router:

npm install react-router-dom@latest

2. Basic Configuration:

Create a basic setup for React Router in your React 18 application. This involves setting up the router, defining routes, and creating components for each route.

3.Create Components:

Create simple components for demonstration purposes.

Home.js:

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

About.js:
import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

Navbar.js:

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

4. Set Up Routing in App.js

Configure the routing in your main App.js file.
App.js:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Navbar from './components/Navbar';

const App = () => {
  return (
    <Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

5. Render the App in index.js or main.js
Ensure your app is rendered correctly in the index.js file.
index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//End
//ALTERNATIVE WAY,
 //AppRouter.jsx for router setup

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

class AppRouter extends Component {
  render() {
    return (
      <Fragment>
       
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/service" element={<AllServicePage />} />
          <Route path="/course" element={<AllCoursePage />} />
          <Route path="/portfolio" element={<PortfolioPage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>  
      </Fragment>
    )
  }
}

//APP.JS
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
    <div>
    <TopNavigation />
    <AppRouter />    
    </div>
    </Router>
   
  );
}
export default App;

//TOPNAVIGATION.JS
import { Link } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
  <Nav>
                <LinkContainer to="/">
                  <Nav.Link>Home</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/about">
                  <Nav.Link>About</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/service">
                  <Nav.Link>Services</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/course">
                  <Nav.Link>Courses</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/portfolio">
                  <Nav.Link>Portfolio</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/contact">
                  <Nav.Link>Contact Us</Nav.Link>
                </LinkContainer>
          </Nav>

//INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();