CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-router-dom
Abishek P.Y
Abishek P.Y

Reputation: 361

react-router-dom with react hooks not working

My app.js Component

import React, { lazy, Suspense } from 'react'
import './App.css'
// import io from 'socket.io-client'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

//lazy load the components
const Login = lazy(() => import('./Components/Login/Login'))
const Home = lazy(() => import('./Components/Home/Home'))
const List = lazy(() => import('./Components/List/List'))
const Page404 = lazy(() => import('./Components/404/'))

function App() {
  return (
    <Router>
      <div className='App'>
        <Suspense
          fallback={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                fontFamily: "'Ubuntu', sans-serif",
                fontSize: '30px'
              }}
            >
              Loading..
            </div>
          }
        >
          <Switch>
            <Route exact path='/'>
              <Home />
            </Route>
            <Route path='/create_user_name'>
              <Login />
            </Route>
            <Route path='/list'>
              <List />
            </Route>
            <Route component={Page404} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}

export default App

When I try to use history.push('/list'), the URL of my page is changing but content of the page is not changed.

Example: When I go to /create_user_name and click a button history.push('/list') is executed. The URL of the page changed from /create_user_name to /list but the page content remains the same. It still contains the same UI made for /create_user_name route instead of /list UI.

history.js Component

import { createBrowserHistory } from 'history'
const history = createBrowserHistory()

export default history

Im using reducer. store component

import io from 'socket.io-client'
import history from '../Components/history'
// import axios from 'axios'
//connect to the server
const socket = io.connect('localhost:3030')
console.log(socket)

//listen for number of users
export const users = socket.on('users', users => {
  console.log(users)
  return users
})

export const setUser = (state, action) => {
  switch (action.type) {
    case 'SET_NAME':
      console.log(action.name)
      const data = {
        name: action.name
      }

      //sent user using socket
      socket.emit('Create_name', data)
      console.log(history)
      history.push('/list') // I CALL THE HISTORY.PUSH HERE

      return state

    default:
      console.log('Default State')
      break
  }
}

Sorry if this question is asked before.

Upvotes: 3

Views: 1597

Answers (2)

watsabitz
watsabitz

Reputation: 88

1.Pass the history to the Router:

import { Router } from 'react-router-dom'
import history from './history'
...
function App() {
  return (
    <Router history={history}>
      ...
    </Router>
  )
}

Make sure you import Router and not BrowserRouter

As BrowserRouter uses its own history and does not accept any outer history property, we have to use Router instead of it.

2.Now whenever you want to use the history outside of a React component you first import it and then you use it. 

import history from './history'
...
history.push('/list');

This way the router is aware of the changes made to the history.

When you are inside of a React component you directly use useHistory hook

Upvotes: 2

Joe
Joe

Reputation: 132

Perhaps you used HashRouter. The code below will help you.

import createHistory from 'history/createHashHistory'
const history = createHistory()

history.push(URL_YOU_WANT)

Upvotes: 1

Related Questions