时间戳

首页 > 解决方案 > React 渲染和按钮点击重定向

javascript - React 渲染和按钮点击重定向

问题描述

我是 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;

我将它导出到 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;

每当我点击按钮时，它都会带我去/home路线，没关系。

在这里，每当我启动我的应用程序时，我都会怀疑它是否会在其上运行localhost:3000，但是我的路线是/login，/home因此我必须localhost:3000/login为渲染登录页面编写localhost:3000代码点击重定向应该可以正常工作。

否则建议我如何在单击按钮时重定向到另一条路线。

标签： javascriptreactjsreact-router

解决方案

有2个解决方案

1> 如果要渲染localhost:3000

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

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

2>如果您不想localhost:3000 在加载组件时将页面重定向到登录。在你的中添加这样的东西App.js会有所帮助

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

推荐阅读