Javascript 反应渲染并单击按钮重定向

我是React的初学者，所以这是我在React中的第一个应用程序

这是我的

App.js

文件

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;

import'/App.css'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./components/Login”导入登录名；
从“./Components/Home”导入Home；
函数App（）{
返回(
);
}
导出默认应用程序；

我将它导出到index.js文件中。 这是我的Login.jsx文件

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;

从“React”导入React；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“./login.css”；
从'react router dom'导入{useHistory}；
函数登录（）{
让历史=使用历史（）；
返回(
票据制作人
{history.push（“/home”）；}}type=“submit”class=“btn”>登录
);
}
导出默认登录；

每当我点击按钮，它就会带我到

/home

路线，这是正常的

这里我有一个疑问，每当我启动我的应用程序时，它都会在

localhost:3000

上运行，但是我的路径是

/login

和

/home

，因此我必须编写

localhost:3000/login

来呈现登录页面，我不想要这个，我想在

localhost:3000

上呈现它，在这段代码中，我的按钮点击重定向应该可以正常工作

否则，请建议我如何通过单击按钮重定向到另一条路线。

我认为

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

---

应该做这项工作

有两种解决方案

1> 如果要渲染

localhost:3000

在App.js文件中添加/的路由

2> 如果不想渲染

localhost:3000

加载组件时，将页面重定向到登录。在你的

App.js

中添加类似的东西会有所帮助

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

---

您可以使用重定向组件从根路由“/”重定向到“/登录”路由。在“/login”

路由

组件之前添加以下内容：