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

Posted 2023-02-22

【中文标题】react-router-dom 与反应挂钩不起作用

【英文标题】：react-router-dom with react hooks not working

【发布时间】：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()

【参考方案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。