Question

我正在使用Electron上的create-react-app开发项目，并且具有react-router-dom。我正在授权用户登录名，并希望在此之后立即将其重定向到主页，但是用于重定向的常规语法似乎不起作用。请查看我的代码并提出建议。

Index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";


let root = document.createElement('div');
root.id = "root";
document.body.appendChild( root );

render( <Router><App /></Router>, document.getElementById('root') );

App.js

import '../assets/css/App.css';
import React, {Component} from 'react';
import VideoContainer from './VideoContainer';
import Clock from './Clock';
import News from './News';
import Spotify from './Spotify';
import Login from './Login';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";


class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/" component={Login} />
          <Route path="/home" component={Clock} />
        <Route path="/news" component={News} />
      </Switch>
    </Router>
);
  }
}

export default withRouter(App);

Login.js

import '../assets/css/Login.css';
import React from 'react'
import PropTypes from 'prop-types'
const URL = 'http://localhost:3000/api/v1/sessions'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.logUser = this.logUser.bind(this);
  }
  addTokenToBrowser(token) {
    localStorage.setItem("id", token.id)
    localStorage.setItem("token", token.token)
  }

  logUser (e) {
    e.preventDefault()
    const data = {
      username: e.target.children[0].value,
      password: e.target.children[2].value
    }
    fetch(URL, {
      method: 'POST',
      body: JSON.stringify(data),
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
      .then(json => {
        if (json.status==="accepted"){
          localStorage.setItem("id", json.id)
          localStorage.setItem("token", json.token)
          this.props.history.push('/home')
        } else {
          alert('Please enter a valid email and password')
        }
      })
   }


  render () {
    console.log("My history", this.props);
  return (
    <div className="myInput">
      <form onSubmit={this.logUser} >
    <input placeholder="Username"></input>
    <br></br>
  <input placeholder="Password"></input>
    <br></br>
  <button type="submit">Login</button>
</form>
    </div>
  )
  }
}

export default Login;

Answer 1

要使用this.props.history.push，必须在Login类中添加withRouter

export default withRouter(Login);

Answer 2

    <Route path="/" component={Login} />
    <Route path="/home" component={Clock} />
    <Route path="/news" component={News} />

将其更改为

    <Route path="/home" component={Clock} />
    <Route path="/news" component={News} />
    <Route path="/" component={Login} />

通配符末尾。

与电子一起使用反应路由器

2 个答案: