Question

我正在学习React。我有4个子页面的页面，我使用React Router来浏览这些页面。除了重新加载页面，一切正常。当我从第34页开始＃home;＃34;到＆＃34;关于＆＃34;或者其他没关系，但是当我刷新页面然后它再次呈现页面＆＃34;关于＆＃34;一秒钟，然后它将页面更改为主页（主页是默认/第一页）。我希望它保留在当前呈现的页面，而不是每次刷新后返回主页。 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')

In＆＃34; App＆＃34;我有导航，在那里我从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是非常重要的。

提前致谢。

Answer 1

检查firebase是否与客户端路由不相干：P

您可以使用索引路径来实现此目的。

您的导航是应用程序组件中所有页面的布局，因此请将其作为根路径。

然后你希望你的家乡路线成为你的默认路线，所以把它作为你的索引路线。

您需要从react-router软件包导入IndexRoute（从中导入Route）。

添加此 -

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')

Answer 2

它是服务器端与客户端问题检查以下主题，它可能会给你一些见解.. React-router urls don't work when refreshing or writting manually

Answer 3

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

devServer: {
    historyApiFallback: true
},

Answer 4

Route标签返回第一个匹配的组件。我认为你已经改变了家庭和应用程序组件的路径。

试试这个。

<Provider store={store}>
    <Router path="/" history={browserHistory}>
        <Route path="/" component={App}> 
            <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')

Answer 5

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

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

Mabye我会写我如何解决我的问题以及原因是什么。所以我正在检查用户是否以auth方式登录。如果用户获得授权，我会将/推送到browserHistory。这是错误的，因为每个刷新方法都在执行，然后也调用了重定向。解决方法是检查在登录页面上执行身份验证方法I期间是否。如果是登录页面，那么我将/推送到浏览器历史记录，但如果没有，则不要推送任何内容。

    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');
     }
    })

我知道这不是一个很好的解决方案，但它有效，它只是为了学习反应而创建的家庭项目。（顺便说一下这个项目是使用旧的反应路由器3.0所以现在使用browserHistory probalby已弃用）

Answer 6

在下面的示例中，您可以参考：

反应路由器导航
浏览器刷新问题。
浏览器后退按钮问题。

请确保您已安装react-router-dom

如果未安装。使用此命令安装npm i react-router-dom

index.js

   import React from "react";
   import ReactDOM from "react-dom";
   import { BrowserRouter, Route, Switch } from "react-router-dom";

   import Page1 from "./Page1";
   import Page2 from "./Page2";

    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <BrowserRouter>
       <Switch>
        <Route exact path="/" component={Page1} />
        <Route path="/page2" component={Page2} />
      </Switch>
      </BrowserRouter>,
      rootElement
    );

Page1.js

   import React from "react";
   import {Link } from "react-router-dom";

    function Page1() {

        return (
          <div>
            <p>
              This is the first page.
              <br />
              Click on the button below.
            </p>
            <Link to="/page2"><button>
              Go to Page 2 
            </button>
            </Link>
          </div>
        );

    }

    export default Page1;

Page2.js

   import React from "react";

   function Page2() {

        return (
          <div>
            <p>This is the second page.</p>
          </div>
        );

    }

    export default Page2;

React Router - 刷新后保持在同一页面

6 个答案: