4

This is my login page (App.jsx) I'm trying to navigate to dashboard after successfully logging in. But it is not navigating as expected. I want to know whether it is possible to navigate from external page (App.jsx) to Routing page (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
}

This is my dashboard page (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>)
        );

    }

};
Codrun
  • 97
  • 2
  • 12
  • Maybe [this answer](https://stackoverflow.com/questions/40079797/reactjs-navigation/40080108#40080108) can help. – Boky Jun 13 '17 at 13:44
  • 1
    Enclose your App component with `withRouter` and see if it works, `export default withRouter(App)` and `import {withRouter} from 'react-router'` – Shubham Khatri Jun 13 '17 at 14:27

1 Answers1

1

I would enclose everything in a higher-order component (App) and do routing inside of the App component. In this way it will be easier to structure your routes and swap out children as needed.

More or less like this;

<App>
  <Login />
  <Dashboard />
</App>
daskel
  • 88
  • 1
  • 10