gpt4 book ai didi

javascript - ReactJS MobX 和 react-router v4 问题与 url 历史

转载 作者:行者123 更新时间:2023-11-29 11:02:08 25 4
gpt4 key购买 nike

我正在使用 ReactJS、MobX 和 react-router v4 制作网络应用程序,我在路由器历史记录和重定向方面遇到了一些问题。我正在尝试在用户注销或登录时将用户重定向到主页,并且我正在尝试在我的商店中实现这一点。这是源代码:

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,但不呈现新组件(主页组件),为此我应该手动刷新网页。

对此有什么建议吗?

最佳答案

我解决了这个问题。

作为路由器,我应该使用 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 中,因为它们都保留了自己的历史记录。它适用于我使用来自“react-router”的默认路由器

关于javascript - ReactJS MobX 和 react-router v4 问题与 url 历史,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45326655/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com