React Js

 

Router in React Js

npm install react-router-dom

first create a router file

import { Routes, Route, Navigate } from "react-router-dom";

import Hooks from "../components/hooks";

import Cours from '../components/carousel'

import App from "../App";

const AppRouter = () => {

  return (

    <>

     

    <Routes>

      <Route path='/' element={<App/> }/>

      <Route path="/hooks" element={<Hooks />} />

      <Route path="/cours" element={<Cours />} />

    </Routes>

    </>

  );

};

export default AppRouter;

Wrap the it in BrowserRouter in the main.jsx

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.bundle.min.js'

import Layout from './Layout/layout.jsx'

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

createRoot(document.getElementById('root')).render(

  <StrictMode>

      <BrowserRouter>

      <Layout/>

      </BrowserRouter>

  </StrictMode>,

)

Layout act as the base.html which contains the navbar and footer

import React from 'react'

import AppRouter from '../routes/Router'

import Header from '../components/header'

import Footer from '../components/footer'

const layout=()=> {

  return (

    <>

    <Header/>

    <AppRouter/>

    <Footer/>

    </>

  )

}

export default layout

errorboundary for showing error in page instead of  console


wrap it in main .jsx

import React, { Component } from "react";

class ErrorBoundary extends Component {

  constructor(props) {

    super(props);

    this.state = { hasError: false, error: null };

  }

  static getDerivedStateFromError(error) {

    // Update state so the next render shows the fallback UI.

    return { hasError: true, error };

  }

  componentDidCatch(error, errorInfo) {

    // You can also log the error to a reporting service here

    console.error("💥 ErrorBoundary caught an error:", error);

    console.error("📍 Component Stack:", errorInfo?.componentStack);

  }

  handleReset = () => {

    this.setState({ hasError: false, error: null });

  };

  render() {

    if (this.state.hasError) {

      return (

        <div style={{ padding: "2rem", textAlign: "center" }}>

          <h2>⚠️ Something went wrong.</h2>

          <p style={{ color: "red" }}>{this.state.error?.message}</p>

          <button onClick={this.handleReset}>🔁 Try Again</button>

        </div>

      );

    }

    return this.props.children;

  }

}

export default ErrorBoundary;