Question

我正在尝试构建一个简单的反应登录应用程序，使用this.props.history.push()登录后导航到主页。不幸的是，我的所有组件this.props都是undefined。以下是相关部分：

根：

import React from 'react'
import {
    BrowserRouter as Router,
    Route
} from 'react-router-dom'

import Login from './views/Login'
import Index from './views/Index'
import Home from './views/Home'

const App = () => {
    return(
        <Router>
            <div>
              <Route exact path="/" component={Index}/>
              <Route path="/login" component={Login}/>
              <Route path="/home" component={Home}/>
            </div>
        </Router>
    )
}

export default App

指数：

import React from 'react'
import Login from './Login'
import Home from './Home'

const Index = () => {
    if (localStorage.getItem("username")) {
        return(
            <Home/>
        );
    } else {
        return (
            <Login/>
        )
    }
}

export default Index

登录：

import React from 'react'

const Login = () => {
    let user, pass

    const login = e => {
        e.preventDefault();
        fetch("http://localhost:3000/api/login", {
            method: "GET",
            headers: {
                "user": user.value,
                "pass": pass.value
            }
        })
            .then(response => response.json())
            .then(function(data) {
                if (data.user) {
                    localStorage.setItem("username", data.user)
                    this.props.history.push("/");
                } else {
                    console.log("Failed to get user")
                }
            })
    }
    return(
      <div>
        <h1>Login</h1>
        <form onSubmit={login}>
          <label> Username:
            <input type="text" className="form-control col-md-12" ref = {node => user = node}/>
          </label>
          <label> Password:
            <input type="password" className="form-control col-md-12" ref = {node => pass = node}/>
          </label>
          <br />
          <input type="submit" value="Submit" />  
        </form>
      </div>
    )
  }

export default Login

Answer 1

您还需要withRouter中的react-router-dom。您的登录信息应如下所示：

import React from 'react'
import { withRouter } from 'react-router-dom'

const Login = (props) => {
    let user, pass

    const login = e => {
        e.preventDefault();
        fetch("http://localhost:3000/api/login", {
            method: "GET",
            headers: {
                "user": user.value,
                "pass": pass.value
            }
        })
            .then(response => response.json())
            .then(function(data) {
                if (data.user) {
                    localStorage.setItem("username", data.user)
                    props.history.push("/");
                } else {
                    console.log("Failed to get user")
                }
            })
    }
    return(
      <div>
        <h1>Login</h1>
        <form onSubmit={login}>
          <label> Username:
            <input type="text" className="form-control col-md-12" ref = {node => user = node}/>
          </label>
          <label> Password:
            <input type="password" className="form-control col-md-12" ref = {node => pass = node}/>
          </label>
          <br />
          <input type="submit" value="Submit" />  
        </form>
      </div>
    )
  }

export default withRouter(Login)

withRouter是一个更高阶的组件。高阶组件就像包装器一样，增加了额外的功能。它们将一个组件作为参数并返回一个新组件;在这种情况下，withRouter会添加历史道具。

可在此处详细了解HOC：https://reactjs.org/docs/higher-order-components.html

没有反应路由器道具传递给我的组件

1 个答案: