CODEWITHSUNDEEP
reactjs
Yush
Yush

Reputation: 53

Uncaught Error: [Navigate] is not a <Route> component

Can anyone help me out with this console error ?

Uncaught Error: [Navigate] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

This is the code I am trying and struggling with. code:

import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import './App.css';
import Blog from './pages/Blog';
import Home from './pages/Home';

const App = () => (
<div className='container'>
  <Routes>
    <Route path='/' exact component={Home} />
    <Route path='/blog/:id' component={Blog} />
    <Navigate to="/" replace={true} />
  </Routes>
   </div>
   );


export default App;

Upvotes: 1

Views: 996

Answers (2)

JayK
JayK

Reputation: 76

I think you cant add navigate outside a Route . Try this

` <Route path= "/" element= {< Home/>} />

  <Route path= "/blog/:id" exact element = {<LandingPage/>} />
  <Route path='*' element={<Navigate to="/" replace={true} />} />

`

Upvotes: 0

Konrad
Konrad

Reputation: 24651

I thinkg you are using version 6 of react-router-dom, but used a part of code that worked in 5

This should work

<Route path='*' element={<Navigate to="/" replace={true} />} />

Upvotes: 1

Related Questions