React-Router在获取数据库时使用加载页面

因此，我使用React Router完成了我的应用程序，并且所有工作都按预期工作。当用户进入页面时，他被重定向到一个加载屏幕，而我的App组件获取一个数据库，并且在完成提取后，用户被重定向到被提取的类别。React-Router在获取数据库时使用加载页面

/ - ><Loader /> - >/App().state.data[0].category。

抓取速度如此之快，以至于用户甚至无法看到加载屏幕，正如预期的那样。所以用户体验。

/ - >/App().state.data[0].category。

所以我的问题是，当用户在/App().state.data[0].category页面，他点击后退按钮，他会看到并留在加载屏幕上。所以他基本上必须双击回到上一页。这是不希望的。

什么用户体验

/App().state.data[0].category - ><Loader /> - >Page before entering the "/"

什么用户应该经验

/App().state.data[0].category - >Page before entering the "/"

我的问题是有办法如果跳转加载屏幕用户按下后退按钮？

我开始看着history npm的东西，我在正确的轨道上？

我现在的配置是这样的伪代码：

main.js

render(
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
    /* This returns the first category from my api */ 
    <IndexRedirect to={App().state.data[0].category} /> 
    <Route path=":category" component={App} /> 
    </Route> 
    </Router> 
,document.getElementById('main'));

App.js

class App extends React.Component{ 
    componentWillMount() { 
    const router = this.context.router; 
    fetchData().then(function(results){ 
     router.push(results.data[0].category); 
    }) 
} 

    render() { 
    return (<Loader/>); 
} 
}

来源

2016-11-15 Regex102

如果你真的想给一个加载器一个URL历史记录，你可以尝试使用'window.history.go（-1-numOfLoaders）;'作为后退按钮，并在添加加载器时增加'numOfLoaders'。例如，如果你有1个加载器页面，你将得到'window.history.go（-2）'。但在我所做的情况下，我没有设置一个URL历史记录的加载器页面。 –

如果你真的采取我的方式，你需要为'window.history.length'做一些错误处理。 –

@AndreLee我在另一个论坛上发布了这个，一个人告诉我用'router.replace'替换'router.push'。你认为那会解决问题吗？我也会试试你的解决方案。 **编辑：**当我说的后退按钮，我的意思是在网络浏览器 – Regex102

为什么不能做一个有条件的渲染零件。

如果数据库 - >渲染页面

其他 - >只要你的数据库使装载机

提取完成后，渲染会发起，你会看到你的页面，而不是您的装载机

来源

2016-11-16 00:52:50 CXNAJ

React-Router在获取数据库时使用加载页面

回答

相关问题