React Router - 刷新后停留在同一页面

IT技术 javascript reactjs redux refresh router
2021-05-19 00:27:21

我正在学习 React。我有 4 个子页面的页面,我使用 React Router 浏览这些页面。除了重新加载页面外,一切正常。当我从页面“主页”转到“关于”或其他页面时,它可以,但是当我刷新页面时,它会再次呈现“关于”页面一秒钟,然后将页面更改为主页(主页是默认页面/第一页)。希望它停留在当前呈现的页面上,而不是每次刷新后返回主页。在 index.js 文件中有我的代码,我在其中渲染整个应用程序并使用路由器:

<Provider store={store}>
    <Router path="/" history={browserHistory}>
        <Route path="/home" component={App}> 
            <Route path="/" component={Home}/>
            <Route path="/allhotels" component={AllHotels}/>
            <Route path="/addhotel" component={AddHotel} />
            <Route path="/about" component={About} />
        </Route>
        <Route path="/signin" component={SignIn} />
        <Route path="/signup" component={SignUp} />
    </Router>
</Provider>, document.getElementById('root')

在“应用程序”中,我有导航,在那里我呈现来自 Home、AllHotels 等的其余内容。

有来自 App.jsx 的代码

class App extends Component {

render() {
    return (
        <div className="app-comp">
            <Navigation />
            <div> {this.props.children}</div>
        </div>
    )
  }
}

我还附上了显示我的问题的 gif。

https://gifyu.com/image/boMp

在后端,如果重要的话,我会使用 Firebase。

提前致谢。

4个回答

我找到了我的问题的原因。我在我的项目中也使用了 Firebase,它导致了问题。谢谢大家的帮助。

编辑 ================================================ ======================

Mabye 我会写下我是如何解决我的问题的,以及它的原因是什么。所以我正在检查用户是否在 auth 方法中登录。如果用户获得授权,我就会推/送到 browserHistory。这是错误的,因为每个刷新方法都在执行,然后还调用了重定向。解决方案只是检查在执行身份验证方法期间我是否在登录页面上。如果它是登录页面,那么我/将推送到 browserHistory,但如果不是,则不要推送任何内容。

    firebaseApp.auth().onAuthStateChanged(user => {
     if (user) {
        let currentPathname = browserHistory.getCurrentLocation().pathname;
        if( currentPathname === "/" || currentPathname === "/signin"){
          browserHistory.push('/');
        }
        const { email } = user;
        store.dispatch(logUser(email));
     }
     else {
        browserHistory.replace('/signin');
     }
    })

我知道这不是很好的解决方案,但它有效,它只是为了学习react而创建的家庭项目。(顺便说一句,这个项目使用的是旧的 react router 3.0,所以现在使用 browserHistory 的概率已被弃用)

检查 firebase 不会干扰客户端路由:P

您可以使用索引路由来实现这一点。

您拥有导航,即应用组件中所有页面的布局,因此将其设为根路由。

然后您希望您的家乡路线成为您的默认路线,因此将其设为您的索引路线。

您需要从 react-router 包(从中导入 Route)导入 IndexRoute。

加上这个——

import { Router, Route, IndexRoute } from 'react-router';

然后让你的路线如下所示。

用这个-

<Provider store={store}>
    <Router history={browserHistory}>
        <Route path="/" component={App}> 
            <IndexRoute component={Home} />
            <Route path="/home" component={Home}/>
            <Route path="/allhotels" component={AllHotels}/>
            <Route path="/addhotel" component={AddHotel} />
            <Route path="/about" component={About} />
        </Route>
        <Route path="/signin" component={SignIn} />
        <Route path="/signup" component={SignUp} />
    </Router>
</Provider>, document.getElementById('root')

这是服务器端与客户端问题,请检查以下线程,它可能会给您一些见解..手动刷新或写入时,React-router url 不起作用

添加到您的webpack.config.js此选项中

devServer: {
    historyApiFallback: true
},