【发布时间】: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