我有一个React组件,它接收用户名和密码并将其发送用于身份验证。如果身份验证成功,则页面应移动到呈现另一个组件的不同路由。
现在的问题是,我不知道如何从我的商店改变路线?i、 e.不使用<代码>
我使用React16与MobX的状态管理,和React路由器V4路由。
商店:
class Store {
handleSubmit = (username, password) => {
const result = validateUser(username, password);
// if result === true, change route to '/search' to render Search component
}
}
登录组件:
const Login = observer(({ store }) => {
return (
<div>
<form onSubmit={store.handleSubmit}>
<label htmlFor="username">User Name</label>
<input type="text" id="username" onChange={e => store.updateUsername(e)} value={store.username} />
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={e => store.updatePassword(e)} value={store.password} />
<input type="submit" value="Submit" disabled={store.disableSearch} />
</form>}
</div>
)
})
主要应用组件:
import { Router, Route, Link } from "react-router-dom";
@observer
class App extends React.Component {
render() {
return (
<Router history={history}>
<div>
<Route exact path="/"
component={() => <Login store={store} />}
/>
<Route path="/search"
component={() => <Search store={store} />}
/>
</div>
</Router>
)
}
}
您可以在单独的模块中创建历史记录
,并将其导入到您的主应用程序Component和Store中:
// history.js
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export default history;
// Store.js
import history from './history';
class Store {
handleSubmit = (username, password) => {
const result = validateUser(username, password);
if (result) {
history.push('/search');
}
}
}
// App.js
import { Router, Route, Link } from "react-router-dom";
import history from './history';
@observer
class App extends React.Component {
render() {
return (
<Router history={history}>
<div>
<Route exact path="/"
component={() => <Login store={store} />}
/>
<Route path="/search"
component={() => <Search store={store} />}
/>
</div>
</Router>
)
}
}
我正在使用在我的反应应用程序中管理客户端存储,因此没有后端图形化服务器。与相关的所有内容都在客户端运行。我将所有UI状态存储在的缓存中。我还在客户端定义了所有解析器。 以下是新建客户端实例的代码: 我读过这篇文章https://www.apollographql.com/docs/angular/features/cache-updates/#automatic-存储更新关于使用apollo gr
每当我在Azure中创建新的Azure功能应用程序时,我都会选择一个存储帐户供其使用。 创建应用程序时,如何查看/更改存储帐户? 我曾尝试在门户中四处查看,但无法看到在哪里可以配置此功能。
这里存储JWT令牌: 谢谢你。
问题内容: 这基本上是该问题的后续解决方案,但是现在由于OS X Docker不再需要Docker Toolbox(即不再需要VirtualBox),我完全迷失了如何从切换到或其他方法。 我在这里也面临的问题是缺少对硬件的支持,这在安装AndroidSDK时会出现问题,因此希望对我有帮助。 那么,如何更改OS X中Docker的本机实现的存储驱动程序? 问题答案: Docker for Mac运行
我要确定一个在Azure表存储中存储日志信息的好策略。我有以下内容: PartitionKey:日志的名称。 ROWKEY:倒置的日期时间刻度, 这里唯一的问题是分区可能会变得非常大(数百万个实体),并且大小会随着时间的推移而增加。 但尽管如此,所执行的查询类型将始终包括(不扫描)和筛选器(小扫描)。 例如(在自然语言中): 如果查询同时在和上完成,那么我理解分区的大小并不重要。
在React Native应用程序中实现以下场景的最佳方式是什么? 向服务器发出HTTP请求,获取JSON响应和ETag头 保存此JSON响应的方式即使在用户重新启动应用程序后也会持续 每当重复此HTTP请求时,发送If-None-Match头。 当您得到“未修改”响应时,请使用持久化缓存中的版本 当您得到“成功”响应(表示响应已更改)时,使持久化缓存无效,保存新响应 React Native有现