React Router - 刷新后停留在同一页面 [英] React Router - Stay at the same page after refresh

问题描述

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

<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 path="/signin" component={SignIn}/><Route path="/signup" component={SignUp}/></路由器></Provider>, document.getElementById('root')

在应用程序"中，我有导航，我在那里呈现来自 Home、AllHotels 等的其余内容.

有来自 App.jsx 的代码

class App 扩展组件 {使成为() {返回 (<div className="app-comp"><导航/><div>{this.props.children}</div>

)}}

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

https://gifyu.com/image/boMp

在后端，如果重要的话，我会使用 Firebase.

提前致谢.

解决方案

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

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

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

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

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

添加这个-

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

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

使用这个-

<路由器历史={browserHistory}><Route path="/" component={App}><IndexRoute 组件={Home}/><Route path="/home" component={Home}/><Route path="/allhotels" component={AllHotels}/><Route path="/addhotel" component={AddHotel}/><Route path="/about" component={About}/></路线><Route path="/signin" component={SignIn}/><Route path="/signup" component={SignUp}/></路由器></Provider>, document.getElementById('root')

I'm learning React. I have page with 4 subpages and i use React Router to go through those pages. Everything works fine except for reloading page. When i go from page "home" to "about" or other it's ok, but when i refresh page then it render again page "about" for a second and then it change page to home (home is default/first page).I want it to stay at that page which is currently rendered, not go back to home after every refresh. There is my code in index.js file where i render whole app and use router:

<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 "App" i have Navigation and there i render rest of conent from Home, AllHotels etc.

There is code from App.jsx

class App extends Component {

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

I also attach gif which shows my problem.

https://gifyu.com/image/boMp

In backend i use Firebase if it's important.

Thanks in advance.

解决方案

Check that firebase does not interfares with the client side routes :P

You can use Index routes to achieve this.

You have your navigation i.e the layout of all pages in your app component so make it the root route.

Then you want your home route to be your default route so make it your Index route.

You need to import IndexRoute from react-router package (from which you import Route).

Add this-

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

and then make your routes like below.

Use this-

<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 - 刷新后停留在同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！