我正在使用ReactJS,MobX和react-router v4制作Web应用程序,我在路由器历史记录和重定向方面遇到了一些问题。 我试图在用户注销或登录时将用户重定向到主页,我正试图在我的商店中实现这一点。这是源代码:
index.js
const APP = document.getElementById('app');
render(
(
<Provider {...stores} >
<MuiThemeProvider>
<Router history={history} >
<div>
<Routes />
</div>
</Router>
</MuiThemeProvider>
</Provider>
) , APP);
Routes.js
@inject('userStore', 'commonStore')
@withRouter
@observer
class Routes extends Component {
render() {
return (
<div>
</div>
<switch>
<Route exact path="/create_listing" render={() =>
(<CreateListing store={clStore} />)}
/>
<Route path="/create_listing/description" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route path="/create_listing/amenities" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route path="/create_listing/optional" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route path="/create_listing/media" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route path="/create_listing/preview" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route path="/create_listing/done" render={() =>(
<CLLayout store={clStore} />
)}/>
<Route exact path="/" component={ FrontPageIndex }/>
</switch>
</div>
);
}
}
export default Routes;
history.js
import createBrowserHistory from 'history/createBrowserHistory';
import createMemoryHistory from 'history/createMemoryHistory';
export default process.env.BROWSER? createBrowserHistory() : createMemoryHistory();
store.js
@action logout() {
return agent.Auth.logout()
.catch(action((err) => {
this.errors = err.response && err.response.body && err.response.body.errors;
throw err;
}))
.finally(action(() => {
commonStore.setToken({});
userStore.forgetUser();
this.inProgress = false;
history.replace('/');
}));
}
方法history.replace(&#39; /&#39;);实际上,替换浏览器中的URL,但不会渲染新组件(主组件),这样做我应该手动刷新网页。
对此有何建议?
答案 0 :(得分:3)
我解决了这个问题。
作为路由器,我应该使用react-dom中的默认路由器,而不是像我使用的react-router-dom中的BrowserRouter或HashRouter。
以下是示例:
import { Router } from 'react-router';
import history from './History';
const APP = document.getElementById('app');
render(
(
<Provider {...stores} >
<MuiThemeProvider>
<Router history={history}>
<div>
<Routes />
</div>
</Router>
</MuiThemeProvider>
</Provider>
) , APP);
同样对于历史文件,这里是代码:
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
export default history;
似乎问题出现在BrowserRouter或HashRouter中,因为它们都保留了自己的历史记录。它适用于我的默认路由器来自&#39; react-router&#39;
答案 1 :(得分:-1)
你尝试过使用Router.transitionTo吗? https://github.com/ReactTraining/react-router/issues/311