react-router-dom 与 react hooks 不起作用

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正在更改，但页面的内容没有更改。

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

历史记录.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

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

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

确保导入路由器而不是浏览器路由器

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

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

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

这样，路由器就知道对历史记录所做的更改。

当你在 React 组件内部时，你直接使用 History 钩子

Answer 2

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

import createHistory from 'history/createHashHistory'
const history = createHistory()
history.push(URL_YOU_WANT)