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](https://reactrouter.com/en/v6.3.0/upgrading/v5#upgrade-to-react-router-v6) and make those fixes to your code. — Andy, Dec 17 '22 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, Jan 20 '23 at 17:53
React Router v6 has changed to use `Navigate` component instead of `Redirect`. You should do as shown here: https://stackoverflow.com/a/69872699/14426823. Note that the props for the `Route` component is also no longer `component=`; it is `element=` now — Bao Huynh Lam, Mar 17 '23 at 00:05

score 1 · Answer 1 · answered Apr 01 '23 at 08:38

1

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 01 '23 at 08:38

JoyShaheb

129
1
7

score 0 · Answer 2 · edited Feb 25 '23 at 11:50

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 '23 at 11:50

Harsh Mangalam

1,116
1
10
19

answered Feb 21 '23 at 19:07

Wesley Patterson

1

score 0 · Answer 3 · edited Jun 18 '23 at 12:09

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

score -1 · Answer 4 · answered Jan 24 '23 at 02:46

-1

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

use this package for vite react router. It's works for me

import { BrowserRouter, Route, Routes } from 'react-router-dom';

answered Jan 24 '23 at 02:46

uttam pun

1
2

Sherif Gomaa · Answer 5 · 2023-03-16T23:43:10.930

-1

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 '23 at 23:43

answered Mar 16 '23 at 23:41

Sherif Gomaa

1
2

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](/help/how-to-answer). – Community Mar 22 '23 at 14:00

React-router-dom is not working with Vite

5 Answers5

follow prompts