React 渲染和按钮点击重定向

Question

I'm beginner in React, so it's my first application in React.

Here this is my App.js file.

import './App.css';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Login from './componants/Login';
import Home from './componants/Home';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/home" component={Home}/>
      </Switch>
    </Router>
    
  );
}

export default App;

And I'm exporting it in index.js file. This is my Login.jsx file.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './login.css';
import { useHistory } from 'react-router-dom';

function Login() {
    let history = useHistory();

    return (
        <section>
            <form>
                <h1>Note Maker</h1>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your email"></input>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter your password"></input>
                <button onClick={() => { history.push("/home"); }} type="submit" class="btn">Login</button>
            </form>
        </section>
        
    );
}

export default Login;

Whenever I click on button it will take me to the /home route it is ok.

Here I have a doubt whenever I start my App it will run on localhost:3000 , but my routes are /login and /home because of this I have to write localhost:3000/login for rendering login page I don't want this I want to render it on localhost:3000 and in that code also my button click redirecting should work properly.

Else suggest me how to redirect to another route on button click.

Answer 1

I think that

<Route exact path="/" component={Login}/>

Should do the job

Answer 2

There are 2 solutions for this

1> If you want to render localhost:3000

Add a Route for / in your App.js file

<Route exact path="/" component={Login}/>

2>If you don't want to render localhost:3000 Redirect your page to login when the component is loaded. Adding something like this in your App.js will help

useEffect(()=>{
   history.push('/login')
},[])