加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

如何使用reactjs从登录页面导航到仪表板

发布时间:2020-12-15 09:30:54 所属栏目:百科 来源:网络整理
导读:这是我的登录页面(App.jsx)我正在尝试在成功登录后导航到仪表板.但它没有按预期导航.我想知道是否可以从外部页面(App.jsx)导航到路由页面(Dashboard.jsx). import React from 'react';import createHistory from 'history/createBrowserHistory';const histo
这是我的登录页面(App.jsx)我正在尝试在成功登录后导航到仪表板.但它没有按预期导航.我想知道是否可以从外部页面(App.jsx)导航到路由页面(Dashboard.jsx).

import React from 'react';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

export default class App extends React.Component {

    constructor(props){
        super(props);
        this.state = {}
    }

    goToDashboard(e){
        this.props.history.push('/employeelist');
    }

    render() {
        return (
            <div>
                <form>
                    <div className="form-group">
                        <label htmlFor="email">Username:</label>
                        <input type="text" className="form-control" id="email" />
                    </div>
                    <div className="form-group">
                        <label htmlFor="pwd">Password:</label>
                        <input type="password" className="form-control" id="pwd" />
                    </div>
                    <button onClick={this.goToDashboard.bind(this)} className="btn btn-primary">Submit</button>
                </form>

            </div>
        );
    }
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
}

这是我的仪表板页面(Dashboard.jsx)

import React from 'react';
import App from './App.jsx';
import EmployeeRegister from './EmployeeRegister.jsx';
import EmployeeList from './EmployeeList.jsx';
import {HashRouter,Route,Link} from 'react-router-dom';

export default class Dashboard extends React.Component{

    render(){

        return(
            (
                <HashRouter>
            <div className="container">

                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <a className="navbar-brand" href="#">Employee</a>
                        </div>
                        <ul className="nav navbar-nav">
                            <li><Link to="/">Form</Link></li>
                            <li className="dropdown">
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Master Files <span className="caret"></span></a>
                                <ul className="dropdown-menu">
                                    <li><Link to="/employeereagister">CreateEmployee</Link></li>
                                </ul>
                            </li>
                            <li><Link to="/employeelist">Show Employees</Link></li>
                        </ul>
                    </div>
                </nav>


                <Route exact path="/" component={App}/>
                <Route exact path="/dashboard" component={Dashboard}/>
                <Route exact path="/employeereagister" component={EmployeeRegister}/>
                <Route exact path="/employeelist" component={EmployeeList}/>

            </div>
                </HashRouter>)
        );

    }

};

解决方法

我将所有内容都包含在更高阶的组件(App)中,并在App组件内部进行路由.通过这种方式,您可以更轻松地构建路径并根据需要换出子项.

或多或少这样;

<App>
  <Login />
  <Dashboard />
</App>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读