Question

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

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

获取速度非常快，用户甚至无法按预期看到加载屏幕。所以用户体验。

/ - ＆gt; /App().state.data[0].category。

所以我的问题是，当用户在/App().state.data[0].category页面上，并且他点击后退按钮时，他将看到并保持在加载屏幕上。因此他基本上必须双击才能返回上一页。这是不可取的。

用户体验

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

用户应体验

的内容

/App().state.data[0].category - ＆gt; 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/>);
 }
}

Answer 1

为什么不对单个组件进行条件渲染。

if database - ＆gt;渲染页面

其他 - ＆gt;渲染装载机

一旦db fetch完成，渲染就会挂载，你会看到你的页面而不是你的加载器

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

1 个答案: