Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I have used React-Router to redirect my page when I click on a link but it is not redirecting

This is my app.js

import React from 'react'
import Quote from './components/Quote';
import './index.css'
import Abraham from './components/Abraham'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <>
      <div>
        <Quote />
        <h2>List of authors</h2>
      </div>
      <Router>
        <div>
          <Link to="/">Author1</Link>
        </div>
        <Routes>
          <Route exactpath="/" element={ <Abraham/>} />
        </Routes>
      </Router>
    </>
  )
}

export default App;

abraham.js

import React from 'react'

export default function Abraham() {
  return (
    <div>
      <h1>My name is Abraham</h1>
    </div>
  )
}

I want to redirect to abraham when I click on author 1 but it is not happening. The page is not redirecting. I used React-Router-DOM to link it to another page which is Abraham which I have imported.

Tags:

2

Answers


  1. 0

    I think you missed a space here between exact path, The exactpath prop should be written as exact path with a space between them. See on the documentation: https://v5.reactrouter.com/web/api/Route/exact-bool

    import React from 'react';
import Quote from './components/Quote';
import './index.css';
import Abraham from './components/Abraham';

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <>
      <div>
        <Quote />
        <h2>List of authors</h2>
      </div>
      <Router>
        <div>
          <Link to="/">Author1</Link>
        </div>
        <Routes>
          <Route path="/" element={<Abraham />} />
        </Routes>
      </Router>
    </>
  )
}

export default App;
    Login or Signup to reply.
  2. 0

    If you would like for the Abraham route and component to be rendered separate from the Quote component, h2 element, and links, then you should place the latter on a route so they are also conditionally rendered based on the URL path.

    There is no exact prop for the Route component in React-Router v6, it should be removed since all routes are now always exactly matched using a route ranking score.

    Example:

    import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={(
            <div>
              <Quote />
              <h2>List of authors</h2>
              <div>
                <Link to="/abraham">Author Abraham</Link>
              </div>
            </div>
          )}
        />
        <Route path="/abraham" element={<Abraham />} />
      </Routes>
    </Router>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search