Question 304132 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why doesn't the link open to another page in React?

HEADER.tsx

import React from 'react'
import { NavLink } from 'react-router-dom'

const Header: React.FC = () => {
  return (
    <header className='header'>

      <div className='left-section'>
        <img src={CustomLogo} alt='Logo' className='logo' />
        <nav className='nav'>
          <ul>
            <li>
              <NavLink to='/'>Homepage</NavLink>
            </li>
            <li>
              <NavLink to='/about'>About Me</NavLink>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

export default Header

ABOUTME.tsx

import React from 'react'
const AboutMe: React.FC = () => {
  console.log('About Me component rendered')
  return (
    <div>
      <p>HELLOOOO!!!!</p>
    </div>
  )
}
export default AboutMe

HOME.tsx

import React, { useEffect } from 'react'
import Header from '../../components/Header'


  return (
    <div className='page-container'>
      <Header />
      
    </div>
  )
}

export default Home

APP.tsx

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Home from './pages/Home/Home'
import AboutMe from './pages/AboutMe/Aboutme'

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<AboutMe />} />
      </Routes>
    </Router>
  )
}

export default App

index.tsx

import React from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './pages/Home/Home'
import '../src/index.css'

const root = document.getElementById('root')!
const rootElement = createRoot(root)
rootElement.render(
  <Router>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Router>
)

I’ve tried in every way, with BrowserRouter, with Switch, in every possible manner. The console doesn’t show any errors, and it doesn’t even print the console.log, so there’s simply no link. What can I do? P.S.: I removed some unnecessary parts of the code.

Tags:

3

Answers


  1. 0

    You are using Router for the index and APP files you need to use it once.

    I don’t see any other issue in your code. if this didn’t work please add a comment or add more context.

    Login or Signup to reply.
  2. 0

    React uses a practice called an SPA which stands for Same Page Accessibility. It means react doesn’t load a new page but it refreshes each time and uploads new components.

    import React, { useEffect } from 'react'

    instead use

    import React from 'react'
import { useEffect } from 'react'

    also check if home needs to appear twice

    import App from './pages/Home/Home'

    Check thoroughly the nesting used to import components in your app.

    Let me know if it helps.

    Login or Signup to reply.
  3. 0

    Consider adding exact={true} to the first <Route /> to fix the issue.

    Alternatively, switch the order of the <Route /> tags so that the shorter path comes last.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search