当前位置: 首页 > 知识库问答 >
问题:

在React应用程序中从存储更改路线

黄仲渊
2023-03-14

我有一个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>
        )
    }
}

共有1个答案

陶锋
2023-03-14

您可以在单独的模块中创建历史记录,并将其导入到您的主应用程序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功能应用程序时,我都会选择一个存储帐户供其使用。 创建应用程序时,如何查看/更改存储帐户? 我曾尝试在门户中四处查看,但无法看到在哪里可以配置此功能。

  • 问题内容: 这基本上是该问题的后续解决方案,但是现在由于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有现