React: A Stupid Simple Example of Using React Router in a Vite React Website

If you have ever used React Router 6+, you might find the tutorial...annoying? I think so. The first introduction seems overly complex. Far too often, nerds creating nerd tutorials add way too much extra code and more advanced techniques when all you want is the basics for the task at hand. Why do nerds need to "flex" their fuckin nerd credentials when creating a fuckin tutorial? Fuckin nerds!

Anyway. Lets keep it simple. Hopefully the following code can get you up and running quicker. Get your feet wet. Get comfortable. When you are ready, get complicated.

*I am using Vite and Typescript. This should be easily modified (only the root file name I think) to use with your standard Create React App setup.

1. Install React Router

copy

npm install react-router-dom

2. Update Your main.js/main.tsx file.

copy

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

3. Update Your App.js/App.tsx file.

copy

import { Routes, Route, Link } from 'react-router-dom';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';

function App()
{
  return (
    <div className="App">
      <div style={{ textAlign: "center", marginBottom: 10, }}>
        <div>
          <Link to="/">Page 1</Link>
        </div>
        <div>
          <Link to="/page2">Page 2</Link>
        </div>
        <div>
          <Link to="/miscmiscmiscmiscismcsicmscs">Page 3</Link>
        </div>
      </div>

      <div style={{ textAlign: "center" }}>
        <Routes>
          <Route path="/" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
          <Route path="*" element={<Page3 />} />
        </Routes>
      </div>
    </div>
  )
}

export default App

4. Create 3 Different Pages

copy

//Page1.tsx
export default function Page1()
{
    return (
        <h1>Page 1</h1>
    )
}

copy

//Page2.tsx
export default function Page2()
{
    return (
        <h1>Page 2</h1>
    )
}

copy

//Page3.tsx
export default function Page3()
{
    return (
        <h1>Page 3</h1>
    )
}