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

Reactjs – Long path fails to load with react-router-dom

I have a VerifyEmail route that takes on a JWT token as a parameter. However, it does not load. Is there anyway to get it to load? The route loads if the token is short, about 10 characters long. Anything longer it does not work. I was wondering if there’s a limit to the length of the url path for react-router-dom to be causing this problem.

In my App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home"
import Login from "./components/Login"
import Logout from "./components/Logout"
import SignUp from "./components/SignUp"
import Navbar from "./components/Navbar"
import VerifyEmail from "./features/users/VerifyEmail"
import { selectCurrentToken } from './features/auth/authSlice'
import { useSelector } from "react-redux/es/hooks/useSelector";

function App() {
  const auth = useSelector(selectCurrentToken)

  return (
    <>
      <BrowserRouter>
        <Navbar auth={auth} />
        <Routes>
          <Route index element={<Home />} />
          {!auth && <Route path="/login" element={<Login />} />}
          {auth && <Route path="/logout" element={<Logout />} />}
          <Route path="/signup" element={<SignUp />} />
          <Route path="/verify/:token" element={<VerifyEmail />} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

In my VerifyEmail.jsx

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

const VerifyEmail = () => {
  const { token } = useParams()

  return (
    <div>{token}</div>
  )
}

export default VerifyEmail

When I try this link, I get a bad request.

http://localhost:5173/verify/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUiLCJpYXQiOjE2OTE1NDkwMjcsImV4cCI6MTY5MTU3MDYyN30.HqPtksRbGTxxP8EeFs7XLHfHQLBXleaVil6MYmiKB3Y

(https://phpout.com/wp-content/uploads/2023/08/zhuzb.png)

Tags:

2

Answers


  1. 0

    The web server is misinterpret your jwt with a file. How is it know the difference between locahost:5173/favicon.ico and localhost:5173/U3MDYyN30.HqPtksRbGTxxP8EeFs7. So it will throw an error Not Found as you show in the image. You have two options to handle this:

    1. If you are using webpack, you can config to disable the dot rule (docs).
     historyApiFallback: {
    disableDotRule: true
 }
    1. You can modify the route and pass the JWT as a query parameter
    <Route path="/verify" element={<VerifyEmail />} />

    And in your VerifyEmail component, use useQuery to get the value of token

    // http://localhost:5173/verify?token=abcxyx
import { useQuery } from 'react-router-dom';

function VerifyEmail() {
   let query = useQuery();
   let token = query.get('token');

   // Rest of your component logic
}
    Login or Signup to reply.
  2. 0

    To Author: have you managed to solve your issue? I have similar problem: I am generating a magic link with JWS token on the .net backend, sending the mail with the link to register, and when I’m trying to click the link I am getting 404. My Router:

    const Router: React.FC = () => (
    <BrowserRouter>
        <Routes>
            <Route path="activate/:token" element={<RegisterFromLink />}></Route>
            <Route path="activate2/:token" element={<RegisterFromLink2 />}></Route>
            <Route path="auth" element={<Auth />} />
            <Route path="dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
            <Route path="admin-dashboard" element={<PrivateRoute requireAdmin={true}><AdminDashboard /></PrivateRoute>} />
            <Route path="/" element={<Home />} />
            <Route path="*" element={<NotFound />} />
        </Routes>
    </BrowserRouter>
);

    my link:
    http://localhost:3001/activate2/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIyMDM5IiwibmJmIjoxNjkxNzU1MjY0LCJleHAiOjE2OTE4NDE2NjQsImlhdCI6MTY5MTc1NTI2NH0.tLtUhag-sY2GDCvLuht7wxc1fLcMcTHqzZ

    my error: Cannot GET /activate2/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIyMDM5IiwibmJmIjoxNjkxNzU1MjY0LCJleHAiOjE2OTE4NDE2NjQsImlhdCI6MTY5MTc1NTI2NH0.tLtUhag-sY2GDCvLuht7wxc1fLcMcTHqzZ

    Does anyone sees any error?

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

Back To Top
Search