Реакция-роутер-дом с реактивными крючками не работает

Question

Мое приложение. js Компонент

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

Когда я пытаюсь использовать history.push('/list'), URL-адрес моей страницы изменяется, но содержимое страницы не изменяется.

Пример: когда я go до /create_user_name и нажимаю кнопку history.push('/list') выполняется. URL-адрес страницы изменен с / create_user_name на / list , но содержимое страницы остается прежним. Он по-прежнему содержит тот же пользовательский интерфейс, созданный для / create_user_name вместо / list UI.

history. js Component

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

export default history

Я использую редуктор. Компонент магазина

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
  }
}

Извините, если этот вопрос задавался ранее.

Answer 1

1.Пропустите историю на маршрутизатор:

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

Убедитесь, что вы импортируете Маршрутизатор , а не BrowserRouter

Поскольку BrowserRouter использует свою собственную историю и не принимает никакого свойства внешней истории, мы должны использовать вместо него Router.

2. Теперь, когда вы хотите использовать историю вне компонента React, вы сначала импортировать его, а затем вы используете его.

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

Таким образом, маршрутизатор узнает об изменениях, внесенных в историю.

Когда вы находитесь внутри компонента React, вы непосредственно используете useHistory hook

Answer 2

Возможно, вы использовали HashRouter. Код ниже поможет вам.

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

history.push(URL_YOU_WANT)