Coderrr

//Root.js:

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

function Root(props){
    return (
        <div>
            <Link to="/about">ABOUT</Link> 
            
        </div>
    )
}

export default Root;

//About.js:


import React from "react";

function About(){
    return (
        <main>
            <p> Hello, World! </p>
        </main>
        
    )
}

export default About;


//Index.js:

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


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

//App.js:

import { RouterProvider, createBrowserRouter
        ,createRoutesFromElements, Route } from "react-router-dom"

import Root from "./Components/Root"
import About from "./Components/About"
import SignUp from "./Components/SignUp"
import Articles from "./Components/Articles"
import Categories from "./Components/Categories"
import Profile from "./Components/Profile"


const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        children: [
            {
                path: "about",
                element: <About />
            }
        ]
    }
])

function App(){
    return(
        <RouterProvider router={router}/>
    )

}

export default App;