Question

我创建了一个简单的应用程序，用于设置登录和注销。我注意到，this.props.history.push("/");确实会更改url，但不会更改页面内容，就像NavBar登录和注销按钮一样，但是保持不变。

这是我将页面推送到首页的代码，它是注销功能。

import React from 'react';
import { Redirect } from 'react-router-dom'

const Logout = () => {
  localStorage.removeItem('jwt');
  return <Redirect to='/' />
}

export default Logout;

因此，这应该更改我的导航栏，而不是注销以登录，但它只是更改浏览器中的url，而不会更改页面内容。遵循我的主页代码

import React from 'react';
import Container from '@material-ui/core/Container';

const Home = () => {
  return (
    <Container fixed>
      <h1>Home page</h1>
    </Container>

      );
  }

export default Home;

我还有什么其他事情可以刷新内容了。我的主页上什么都没有。

Answer 1

只需将新路径推送到location对象，就不会更改当前页面。假设您的路由已在Router组件中正确配置，则可以使用withRouter组件包装子项，并将新路径推送到已映射的url。

const MyRouter = () =>(
    <BrowserRouter>
        <Route path='/item' component={Item} />
    </BrowserRouter>
)

const Item = withRouter(({ history }) =>{
    return(
         <div onClick={() => history.push('/anotherpath')}>I'm item </div>
    )
})

页面无法刷新

1 个答案: