react-router-dom 与反应挂钩不起作用答案

【问题标题】：react-router-dom with react hooks not workingreact-router-dom 与反应挂钩不起作用
【发布时间】：2020-05-19 07:39:01
【问题描述】：

我的 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 路由而不是 /list UI 制作的相同 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
  }
}

对不起，如果之前有人问过这个问题。

【问题讨论】：

我们能看到你执行history.push的函数吗？应该像props.history.push
我从 react history 导入了createHistory。然后执行history.push()

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

1.将历史记录传递给路由器：

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

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

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

2.现在，每当您想在 React 组件之外使用历史记录时，您首先导入它，然后再使用它。

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

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

当你在一个 React 组件中时，你直接使用 useHistory 钩子

【讨论】：

【解决方案2】：

也许你使用了 HashRouter。下面的代码会对你有所帮助。

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

history.push(URL_YOU_WANT)

【讨论】：

我也做了同样的事情并执行了history.push()。我没有使用 HashRouter。