React Vite - How To Add A Route With Component

To add a new route to your Vite/React application follow these steps:

1. Install React router:
   $ npm install react-router-dom localforage match-sorter sort-by
2. Open main.jsx, import react router and add the BrowserRouter:
   
   import { BrowserRouter } from 'react-router-dom'

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

     <React.StrictMode>

       <BrowserRouter>

       <App />

       </BrowserRouter>

     </React.StrictMode>,

   )
3. Open App.jsx and make it like this:
   
   import { Link, Route, Routes } from 'react-router-dom'

   import Navigation from "./components/Navigation"

   import Home from "./components/Home"

   
   

   function App() {

     return (

       <div className="bg-slate-100">

         <Navigation />

         <Routes>

           <Route path="/home" element={<Home />} />

         </Routes>

         <h1>Welcome</h1>

       </div>

     )

   }

   
   

   export default App
4. For more information visit https://reactrouter.com/en/main/start/tutorial