Мое приложение. 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
}
}
Извините, если этот вопрос задавался ранее.