在反应路由器中刷新时出现空白页面 [英] blank page when refreshing in react router

问题描述

当我从/home 导航到/dashboard 时，路由器工作正常，但是当我从/home 导航到/profile:id 时，路由器将我导航到该配置文件页面，该页面也工作正常，但是当我刷新它时，然后它变成了空白页面并且不会给我任何 404 或重定向回主页，我正在使用

react-router: "^4.2.0",react-router-dom: "^4.2.2",react-router-redux: "5.0.0-alpha.6",

那么，如何摆脱空白页面，如果 url 位于/profile/5，然后在刷新页面上导航回主页或任何适当的内容，请帮忙?

<块引用>

index.js

ReactDOM.render(<提供者商店={商店}><ConnectedRouter history={history}><开关><Route path="/" component={App}/><路由组件={Page404}/></开关></ConnectedRouter></提供者>,document.getElementById('app-site'));

<块引用>

App.js

<开关><路由路径={`/login`} component={LoginMember}/><路由路径={`/registermember`} component={SignUp}/><认证组件={AuthenticateRoute}/><路由组件={Page404}/></开关>const AuthenticateRoute = ({ match }) =>(<开关><认证路径={`${match.url}`} 组件={MainApp}/><路由组件={Page404}/></开关>);

<块引用>

主应用

<开关><Route path={`/home`} component={Home}/><路由路径={`/profile/:id`} component={Profile}/><路由组件={Page404}/></开关>

解决方案

我已经解决了这个问题，我的问题是在 package.json 中，我在 package.json 中指定了主页，例如:

<预><代码>..主页":http://mywebsite.com/relativepath"..

when i navigate from /home to /dashboard,router is working fine but when i navigate from /home to /profile:id, router navigates me to that profile page which is also working fine,but when i refresh it,then it becomes blank page and does not give me any 404 or redirects back to home page,i am using

react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",

So,how to get rid of blank page and if url is at /profile/5,and then on refresh page gets navigate back to home page or anything that should be appropriate,please help?

index.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

App.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

MainApp

<Switch>                
    <Route path={`/home`} component={Home} />
    <Route path={`/profile/:id`} component={Profile} />
    <Route component={Page404} />
</Switch>

解决方案

I've been through this and my issue was in package.json, and I specified the homepage in my package.json, for example:

.
.
"homepage": "http://mywebsite.com/relativepath"
.
.

这篇关于在反应路由器中刷新时出现空白页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！