Question

我的app.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正在更改，但是页面的内容未更改。

示例：当我转到/create_user_name并单击按钮history.push('/list')时，将执行。页面的URL从 / create_user_name 更改为 / list ，但是页面内容保持不变。它仍然包含与 / create_user_name 路由相同的UI，而不是 / list UI。

history.js组件

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

也许您使用了HashRouter。下面的代码将为您提供帮助。

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

history.push(URL_YOU_WANT)

Answer 2

1。将历史记录传递到路由器：

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

请确保您导入的是 Router ，而不是BrowserRouter

由于BrowserRouter使用自己的历史记录，并且不接受任何外部历史记录属性，因此我们必须使用Router代替它。

2。现在，无论何时要在React组件之外使用历史记录，都首先导入它，然后再使用它。

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

通过这种方式，路由器可以知道对历史记录所做的更改。

当您位于React组件内部时，可以直接使用useHistory钩子

react-router-dom与react挂钩不起作用

2 个答案: