URL历史记录的ReactJS MobX和react-router v4问题 [英] ReactJS MobX and react-router v4 issue with url history
问题描述
我正在使用ReactJS,MobX和react-router v4制作Web应用程序,并且我在路由器历史记录和重定向方面遇到了一些问题. 我试图在用户注销或登录时重定向用户的主页,并且试图在我的商店中实现此目的.这是源代码:
I am making web-application with ReactJS, MobX, and react-router v4 and I have some problems with router history and redirections. I am trying to redirect the user the home page when he will logout or login, and I am trying to implement this in my store. Here is the source code:
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('/');实际上,它会替换浏览器中的URL,但不呈现新组件(home组件),为此,我应该手动刷新网页.
The method history.replace('/'); actually, replaces the URL in the browser, but doesn't render the new component ( the home component ), to do so I should refresh the webpage manually.
对此有何建议?
推荐答案
我解决了这个问题.
作为路由器,我应该使用react-dom中的默认路由器,而不是像我以前那样使用react-router-dom中的BrowserRouter或HashRouter.
As a router, I Should be Use the Default Router from react-dom, instead of BrowserRouter or HashRouter from react-router-dom as I was using.
这里是示例:
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);
对于历史文件,这也是代码:
Also for the history file, here is the code:
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
export default history;
似乎问题出在BrowserRouter或HashRouter中,因为它们都保留了自己的历史记录.它适用于我的'react-router'中的默认路由器
Seems that the problem was in the BrowserRouter or HashRouter since those both keep their own history. It worked for me with default Router from 'react-router'
这篇关于URL历史记录的ReactJS MobX和react-router v4问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!