React Router Development Tutorials, Guides & Insights

No preview available for this content.

npm create vite@latest my-react-app -- --template react

Navigate into your project directory:

Modify the app.jsx file to include routing:

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

   function Home() {
       return <h1>Home Page</h1>;
   }

   function About() {
       return <h1>About Page</h1>;
   }

   function App() {
       return (
           <Router>
               <nav>
                   <Link to="/">Home</Link>
                   <Link to="/about">About</Link>
               </nav>
               <Routes>
                   <Route path="/" element={<Home />} />
                   <Route path="/about" element={<About />} />
               </Routes>
           </Router>
       );
   }

   const rootElement = document.getElementById('app');
   if (rootElement) {
       const root = ReactDOM.createRoot(rootElement);
       root.render(<App />);
   }

   npm start

This command starts the development server and opens your new React application in the browser.