updated latest react router syntax

src/AppRouter.js

@@ -1,21 +1,32 @@
 import React from 'react'
-import { BrowserRouter, Redirect, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Outlet } from 'react-router-dom'
+
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'
 import Search from './pages/Search'
 
+const Layout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+      <Footer />
+    </>
+  )
+}
+
 const AppRouter = () => (
   <BrowserRouter>
-    <Navbar />
     <Routes>
-      <Route path='/' exact render={() => <Navigate to='/browse' />} />
+      <Route path='/' element={<Layout />}>
-      <Route path='/browse' component={Home} />
+        <Route index element={<Home />} />
-      <Route path='/search' component={Search} />
+        <Route path='/browse' element={<Home />} />
-      <Route component={NotFound} />
+        <Route path='/search' element={<Search />} />
+        <Route path='*' element={<NotFound />} />
+      </Route>
     </Routes>
-    <Footer />
   </BrowserRouter>
 )
 

src/components/Navbar.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
-import { withRouter } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { useScroll } from '../hooks/useScroll'
 import SearchLogo from '../static/images/search-icon.svg'
@@ -9,7 +9,8 @@ import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
 import DropdownContent from '../components/DropdownContent'
 
-const Navbar = ({ history }) => {
+const Navbar = () => {
+  const navigate = useNavigate()
   const searchInput = React.useRef(null)
   const [userInput, setUserInput] = useState('')
   const [scrollDimensions] = useScroll()
@@ -24,9 +25,9 @@ const Navbar = ({ history }) => {
       document.activeElement === searchInput.current &&
       userInput.length === 0
     ) {
-      history.push('/browse')
+      navigate('/browse')
     }
-    if (userInput.length > 0) history.push(`/search?q=${userInput}`)
+    if (userInput.length > 0) navigate(`/search?q=${userInput}`)
   }, [userInput, searchInput])
 
   const onLogoClick = () => {
@@ -75,4 +76,4 @@ const Navbar = ({ history }) => {
   )
 }
 
-export default withRouter(Navbar)
+export default Navbar

src/hooks/index.js

@@ -0,0 +1,6 @@
+import { useDebounce } from './useDebounce'
+import { useScroll } from './useScroll'
+import { useViewport } from './useViewport'
+import { useWithRouter } from './useWithRouter'
+
+export { useDebounce, useScroll, useViewport, useWithRouter }

src/hooks/useWIthRouter.js

@@ -1,17 +0,0 @@
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
-
-/**
- * @description  Provides react router dom props
- * @param {*} Component React component - JSX Element
- * @returns React component with route props
- */
-export const withRouter = (Component) => {
-  const ComponentWithRouterProp = (props) => {
-    let location = useLocation()
-    let navigate = useNavigate()
-    let params = useParams()
-    return <Component {...props} router={{ location, navigate, params }} />
-  }
-
-  return ComponentWithRouterProp
-}

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux'
 import ReduxThunk from 'redux-thunk'
@@ -23,4 +23,4 @@ const app = (
   </Provider>
 )
 
-ReactDOM.render(app, document.getElementById('app'))
+ReactDOM.createRoot(document.getElementById('app')).render(app)