React-router-dom is not working with Vite

Question

I'm building an web application besed on React and Vite. I also use react-router-dom to create a navigation into my app but when I go to the main page I've got this error in my browser's console:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=67b79ac4' does not provide an export named 'Redirect'

I'm trying to make a navigation into my React app with react-router-dom. Here is my App.jsx code :

import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"

import Header from "./routes/Header/Header";
import Home from "./routes/Home/Home.jsx";
import AboutMe from "./routes/AboutMe/AboutMe.jsx";
import Portfolio from "./routes/Portfolio/Portfolio.jsx";
import Socials from "./routes/Socials/Socials.jsx";

function App() {

  return (
    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exace path="/about-me" component={AboutMe} />
          <Route exact path="/portfolio" component={Portfolio} />
          <Route exact path="/socials" component={Socials} />
          <Redirect to="/" />
        </Switch>
      </Router>
    </div>
  )
}

export default App

And here is all my dependencies in the package.json file :

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.5.0",
  "sass": "^1.57.0"
},
"devDependencies": {
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.9",
  "@vitejs/plugin-react": "^3.0.0",
  "vite": "^4.0.0"
}

So can someone explain me why my navigation is not working and how can I resolve the problem ?

You're using code for RR v5 and below but you've installed v6. RR changed quite a lot when it advanced to v6. You'll want to take a look at the upgrade documentation and make those fixes to your code. — Andy
– Andy, Commented Dec 17, 2022 at 11:10
It looks like Vite is trying to import a specific version of the module, /node_modules/.vite/deps/react-router-dom.js?v=67b79ac4, which does not contain the Redirect export. — tdimoff
– tdimoff, Commented Jan 20, 2023 at 17:53
React Router v6 has changed to use Navigate component instead of Redirect. You should do as shown here: stackoverflow.com/a/69872699/14426823. Note that the props for the Route component is also no longer component=; it is element= now — Bao Huynh
– Bao Huynh, Commented Mar 17, 2023 at 0:05

JoyShaheb · Accepted Answer · 2023-04-01 08:38:14Z

3

Redirect was a feature of version 5 of react-router-dom. from your package.json file i can see you're using version 6. you have to do it like this import { redirect } from "react-router-dom";

you can learn more from their official documentatuion

answered Apr 1, 2023 at 8:38

JoyShaheb

6296 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pensum Over a year ago

I had tried redirect also, but it didn't work for me. I decided to use the Navigate component instead.

Super Kai - Kazuya Ito · Accepted Answer · 2023-06-18 12:09:31Z

In your src directory update your index.js or main.js if using vite

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

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

import Route and Routes from react router dom then import your global assets in App.jsx

import { useState } from 'react';
import { Route, Routes } from "react-router-dom";
import './App.css';

import Header from "./routes/Header/Header";
import Home from "./routes/Home/Home.jsx";
import AboutMe from "./routes/AboutMe/AboutMe.jsx";
import Portfolio from "./routes/Portfolio/Portfolio.jsx";
import Socials from "./routes/Socials/Socials.jsx";

Then render

function App() {

  return (
    <div className="App">
      <Header/>
      <Routes>
        <Route path="/" element= {<Home/>} />
        <Route path="/about-me" element= {<AboutMe/>} />
        <Route path="/portfolio" element= {<Portfolio/>} />
        <Route path="/socials" element= {<Socials/>} />
      </Routes>
    </div>
  )
}

export default App

Remember to update

<a href=""> to <Link to="">

for your nav links

Harsh Mangalam · Accepted Answer · 2023-02-25 11:50:17Z

0

Good question might have something to do with

<Route ***exace*** path="/about-me" component={AboutMe} />

might try to change it to exact. hope this helps.

edited Feb 25, 2023 at 11:50

Harsh Mangalam

1,3271 gold badge12 silver badges22 bronze badges

answered Feb 21, 2023 at 19:07

Wesley Patterson

1

Comments

CrsCaballero · Accepted Answer · 2024-11-29 18:41:54Z

react-router-dom v6 doesn't use <Switch> anymore, you have installed v6 but are using the old structure from v5, which is also not compatible with vite

so, keep the version that you are using, but do some changes like:

in App file

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" element={Home} />
          <Route path="/about-me" element={AboutMe} />
          <Route path="/portfolio" element={Portfolio} />
          <Route path="/socials" element={Socials} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

uttam pun · Accepted Answer · 2023-09-27 03:10:01Z

-1

npm install react-router-dom localforage match-sorter sort-by

use this package for vite react router. It's works for me here is the link https://reactrouter.com/en/main/start/tutorial

edited Sep 27, 2023 at 3:10

answered Jan 24, 2023 at 2:46

uttam pun

112 bronze badges

Comments

Sherif Gomaa · Accepted Answer · 2023-03-16 23:43:10Z

-4

We'll be using Vite for our bundler and dev server for this tutorial. You'll need Node.js installed for the npm command line tool.

👉️ Open up your terminal and bootstrap a new React app with Vite:

npm create vite@latest name-of-your-project -- --template react

follow prompts

cd npm install react-router-dom localforage match-sorter sort-by npm run dev You should be able to visit the URL printed in the terminal:

VITE v3.0.7 ready in 175 ms

➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose

edited Mar 16, 2023 at 23:43

answered Mar 16, 2023 at 23:41

Sherif Gomaa

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React-router-dom is not working with Vite

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

follow prompts

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

follow prompts

1 Comment

Linked

Related