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

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

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

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 是高阶组件。高阶组件就像添加附加功能的包装器。他们将一个组件作为参数并 return 一个新组件；在这种情况下 withRouter 添加历史道具。

可以在此处阅读有关 HOC 的更多信息：https://reactjs.org/docs/higher-order-components.html

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

No react-router props being passed to my components

reactjs

react-router

react-router-dom