Link to home
Start Free TrialLog in
Avatar of Michael Sterling
Michael SterlingFlag for United States of America

asked on

Why won't my app route correctly and show my component?

I'm trying to understand routing in React but I'm have trouble understanding why my application isn't routing. Below is my app component and a login component. When I click the button I expect my login page to show, however, nothing happens. What am I doing wrong/not understanding?
app.js
import React from "react";
import Login from './containers/ConLogin/ConLogin';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () =>{
  return (
    <div>
    <Router>
      <div className="MainNav">
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/SignInList">SignInList</Link>
          </li>
        </ul>
        <hr />
      </div>
    </Router>
    <Login />
    </div>
  );
}

export default App;

Open in new window


login container
import React from 'react';
import Login from '../../components/Login/Login';
import './ConLogin.css';

const ConLogin = () => {

    return (
        <div className="ConLogin">
            <Login/>
        </div>
    );

}

export default ConLogin;

Open in new window


Login component
import React, {useState} from 'react';
import SignInList from '../../containers/ConSignInList/ConSignInList';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";

const Login = () => {

    const [username, setUserName] = useState('');
    const [password, setPassword] = useState('');
    const [submitted, setSubmitted] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, SetError] = useState('');

    const handleChange = (e) => {
        const { name, value } = e.target;
        
        if (e.target.name == "username")
            setUserName(e.target.value);
        else
            setPassword(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();

        setSubmitted(true);

        // stop here if form is invalid
        if (!(username && password)) {
            return;
        }

        setLoading(true);

        <Route path="/SignInList" component={SignInList} />

    }

    return (
        <div>
            <div className="d-flex justify-content-center">            
            <form name="form" onSubmit={handleSubmit}>
                <div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
                    <label htmlFor="username">Username</label>
                    <input type="text" className="form-control" name="username" value={username} onChange={handleChange} />
                    {submitted && !username &&
                        <div className="help-block">Username is required</div>
                    }
                </div>
                <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
                    <label htmlFor="password">Password</label>
                    <input type="password" className="form-control" name="password" value={password} onChange={handleChange} />
                    {submitted && !password &&
                        <div className="help-block">Password is required</div>
                    }
                </div>
                <div className="form-group">
                    <button className="btn btn-primary" disabled={loading}>Login</button>
                </div>
            </form>
        </div>
        </div>
    );
}

export default Login; 

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of dfke
dfke

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial