React Router (version 5.3) is not rendering the page content when clicking on links

Question

Currently have a Vite react-ts template setup using react router version 5.3 for routing. The issue is simple, that whenever I click on a Link it does not render the page but instead displays the current content that was already there. The URL changes and dev inspection the anchor tag is setup. Right now in order for the content to display correctly you would have to refresh the page.

The setup is simple right now but this is going to be a large project.

Below is the file structure:

├─ adminweb3
│  ├─ index.html
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ public
│  │  └─ vite.svg
│  ├─ src
│  │  ├─ App.tsx
│  │  ├─ assets
│  │  │  └─ react.svg
│  │  ├─ components
│  │  │  ├─ ArrowIcon
│  │  │  │  └─ index.tsx
│  │  │  ├─ Footer
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  ├─ Header
│  │  │  │  ├─ header.module.css
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ Logo
│  │  │  │     ├─ index.tsx
│  │  │  │     └─ styles.module.css
│  │  │  ├─ IntroHeader
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ styles.module.css
│  │  │  └─ Layout
│  │  │     ├─ Container
│  │  │     │  ├─ index.tsx
│  │  │     │  └─ styles.module.css
│  │  │     ├─ index.module.css
│  │  │     └─ index.tsx
│  │  ├─ Content
│  │  │  ├─ Configuration
│  │  │  │  └─ ConfigurationHome.ts
│  │  │  ├─ Footer
│  │  │  │  └─ footer.json
│  │  │  ├─ Home
│  │  │  │  ├─ About.json
│  │  │  │  ├─ FAQ.ts
│  │  │  │  └─ Tutorial.json
│  │  │  ├─ Navigation
│  │  │  │  └─ index.ts
│  │  │  ├─ Sagacity
│  │  │  │  ├─ History
│  │  │  │  │  └─ HistoryContent.ts
│  │  │  │  ├─ Management
│  │  │  │  │  └─ ManagementContent.ts
│  │  │  │  └─ SagacityContent.ts
│  │  │  ├─ Support
│  │  │  │  └─ supportHome.ts
│  │  │  └─ Terminal
│  │  │     └─ terminalHome.ts
│  │  ├─ index.css
│  │  ├─ main.tsx
│  │  ├─ pages
│  │  │  ├─ Configuration
│  │  │  ├─ demo
│  │  │  │  └─ index.tsx
│  │  │  └─ Home
│  │  │     ├─ About
│  │  │     │  ├─ index.tsx
│  │  │     │  └─ styles.module.css
│  │  │     ├─ Contact
│  │  │     │  ├─ index.tsx
│  │  │     │  └─ styles.module.css
│  │  │     ├─ Faq
│  │  │     │  ├─ index.tsx
│  │  │     │  └─ styles.module.css
│  │  │     ├─ HealthCheck
│  │  │     │  └─ index.tsx
│  │  │     ├─ Tutorial
│  │  │     │  ├─ index.tsx
│  │  │     │  └─ styles.module.css
│  │  │     └─ VersionHistory
│  │  │        └─ index.tsx
│  │  └─ vite-env.d.ts
│  ├─ tsconfig.json
│  ├─ tsconfig.node.json
│  └─ vite.config.ts

Below is the main.tsx file:

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

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

Here is the App.tsx file where we are setting up React-Router and the routes:

import Layout from "./components/Layout"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Contact from './pages/Home/Contact';
import Faq from './pages/Home/Faq';
import About from './pages/Home/About';
import Tutorial from './pages/Home/Tutorial';

function App() {
  return (
    <>
      <Router>
        <Layout>
          <Switch>
            <Route exact path="/" component={Tutorial} />
            <Route exact path="/Contact" component={() => <Contact />} />
            <Route  path="/Faq" component={() => <Faq />} />
            <Route  path="/About" component={() => <About />} />
          </Switch>
        </Layout>
      </Router>
    </>
  )
}

export default App

Lastly is the Footer.tsx file that displays the links that I have so far:

import styles from './styles.module.css'
import data from '../../Content/Footer/footer.json'
import { Link, NavLink } from 'react-router-dom'

/**
 * It's a function that returns a JSX element.
 * @returns An array of JSX.Elements
 */
export default function Footer(): JSX.Element {
  return (
    <>
      <footer className={[styles.footer].join(' ')}>
        <p className={styles.copyright}>&copy;{data.copyright}</p>
        <p className={[styles.linkContainer].join(' ')}>
          {data.links.map((item) => {
             return <NavLink key={item.link} className={styles.link} to={item.url}>{item.link}</NavLink>
          })}
        </p>
      </footer>
    </>
  )
}

I feel that this is pretty straight forward and have done a similar project (without Vite) using react-router and it works just fine. Is there something I am missing?

React Router (version 5.3) is not rendering the page content when clicking on links

0 Answers0