【问题标题】:goBack() taking me all the way to first entry instead of where I want to begoBack() 带我一直到第一个条目,而不是我想去的地方
【发布时间】:2016-03-05 14:55:00
【问题描述】:

我正在创建一个应用程序,我在其中登录/注销有一个家、关于、个人资料等。它也使用反应路由器,但是当我登录时,我希望应用程序转换到它所在的最后一个路由,它有时有效,例如,如果我访问 about,然后登录并登录,它会带我回到 about,但是如果我访问应用程序 root '/' 然后去登录,然后登录,它会带我回到我的第一页曾经开启(这将是您打开浏览器或选项卡时的默认页面)。我是这样写的,我认为我可能这样做的方式非常幼稚。我是在被称为很多的渲染方法中做到的。我认为有时与此有关,但不完全确定。希望得到一些建议,代码:

constructor(props, context) {
    super(props, context);
    this.state = UserStore.getState();
    this.context = context;
  }

render() {

    console.log(this.state.user.get('authenticated'));
    if(this.state.user.get('authenticated')){
        this.context.history.goBack();
    }

     return (
    //stuff
    )

我是否应该将我访问的每条路线都推送到历史记录中,我还注意到,如果我在登录之前稍等片刻,有时它会正确执行,也许它会晚一点将其添加到历史记录中或者需要一些时间?不完全确定如何调试它,console.log(this.context.history) 只是显示了它的一堆功能,我想我可能看错了地方?

路线:

export default (
  <Route component={App}>
    <Route path="/" component={Dashboard} />
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
    <Route path="about" component={About} />
    <Route path="profile" component={Profile} onEnter={requireAuth}/>
    <Route path="login" component={LoginSignupPage} />
    <Route path="channels" component={Channels} />
  </Route>
);

注入反应路由器

import React from 'react';
import ReactDOM from 'react-dom';
import Iso from 'iso';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router } from 'react-router';

import alt from 'altInstance';
import routes from 'routes.jsx';
import injectTapEventPlugin from 'react-tap-event-plugin';
window.React = React;
injectTapEventPlugin();

/*
 * Client side bootstrap with iso and alt
 */
Iso.bootstrap((state, _, container) => {
  alt.bootstrap(state);
  ReactDOM.render(<Router history={createBrowserHistory()} children={routes} />, container);
});

【问题讨论】:

  • 你能分享一下你是如何将 注入到渲染中的代码吗?您使用的是哪个路由器版本?您应该将 createHistory() 传递给路由器。
  • 是的,给你,我确实 createBrowserHistory 所以应该没问题。
  • 我今天了解到,使用 createMemoryHistory 完全可以正常工作,但是 url 不会改变,即如果转到 localhost:3000/ 和 localhost:3000/about 它将显示索引路线,你可以只能从那里导航

标签: reactjs browser-history react-router isomorphic-javascript


【解决方案1】:
<Route path="/" component={App}>
    <IndexRedirect to='dashboard' />
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
    <Route path="about" component={About} />
    <Route path="profile" component={Profile} onEnter={requireAuth}/>
    <Route path="login" component={LoginSignupPage} />
    <Route path="channels" component={Channels} />
</Route>

像这样更改路线可能会解决您的问题。路径“/”应该是“login”的父级路由,但不是同一级

【讨论】:

  • 并没有真正修复它,这样做也弄乱了材质 ui 和用户界面中的选项卡开关,就像路线正在改变但没有图形内容移动一样。如果你想看看它的样子,我可以把它放在一个真实的网站上。
  • 我还以为是路由结构的问题,现在好像不对。我现在也觉得很迷茫。 -_-
  • 请放到网站上。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-11-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-21
  • 2012-10-25
相关资源
最近更新 更多