Question

我是react.js的新手。如何在登录后重定向react.js？它与Vue.js路由不同吗？我安装了this包。我看了this个问题。我尝试过不同的方式，但没有人工作。

你能帮我一些基本代码或任何基础教程吗？

这是我的代码

import React, { Component } from 'react';
import Auth from '../services/Auth'
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory, Redirect } from 'react-router-dom'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {email: '',password:''};

        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleChange (event){
        this.setState({[event.target.name]: event.target.value});
    }
    handleClick(){
        var data = {
            client_id: 2,
            client_secret: 'ispGH4SmkEeV4i5Tz9NoI0RSzid5mciG5ecw011f',
            grant_type: 'password',
            username: this.state.email,
            password: this.state.password
        }

        fetch('http://127.0.0.1:8000/oauth/token', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then((response) => response.json())
        .then((responseData) => {

            Auth.setToken(responseData.access_token,responseData.expires_in+ Date.now());

            this.props.history.push("/dashboard");  

        })
    }
}

export default Login;

我收到如下错误

Answer 1

你能否出示错误？

该组件对我来说似乎不完整。

如果您使用的是history v4，则该组件应使用withRouter包装。这会将历史道具传递给组件。您能否确认undefined道具是否import os def fun(path1,path2): p1=os.path.join(path1,path2) os.chdir(p1) print('currently in ',p1) print('folders currently in this directories are:') print(next(os.walk('.'))[1]) p2=input('which folder you wanna access among these:') fun(p1,p2) x=input('which drive you wanna access:') fun(x,path2='')？

如果我误解了你的问题，请道歉。

Answer 2

React.js中有两种重定向方式。

一个正在使用来自react-router-dom的重定向。

其他正在使用第三方库，即历史记录（这就是您正在使用的库）如果您没有在道具中获取历史记录，则需要使用withRouter。

示例：

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

    class Login extends React.Component {
      handleSubmit = (user) => {
        saveUser(user).then(() =>
          this.props.history.push('/dashboard')
        ))
      }
      render() {
        return (
          <div>
            <h1>Register</h1>
            <Form onSubmit={this.handleSubmit} />
          </div>
        )
      }
    }

    export default withRouter(Login)

有关详细信息，请参阅：

How to redirect in react.js with example

Answer 3

首先，您需要使用BrowserRouter包装您的应用程序（基本上是应用程序）。然后，您需要为组件定义Route。

export async function fetchWeather(city) {

  try {
    const request = await axios.get(`${ROOT_URL}&q=${city}`);
    // server returned a 2XX response (success)
    return {
      type: FETCH_WEATHER,
      payload: request
    };
  } catch(error) {
    // Network failure or 4XX or 5XX response.
    return {
      type: FETCH_WEATHER_FAIL
      payload: error
    }
  }
}

你得到的错误是因为你没有正确传递道具。

Answer 4

试试这个：

import React, { Component } from 'react';
import Auth from '../services/Auth'
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory, Redirect } from 'react-router-dom'

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {email: '',password:''};

        this.handleChange = this.handleChange.bind(this);
        //this.handleClick = this.handleClick.bind(this);
    }

    handleChange (event) {
        this.setState({[event.target.name]: event.target.value});
    }

    handleClick = (event) => {
        var data = {
            client_id: 2,
            client_secret: 'ispGH4SmkEeV4i5Tz9NoI0RSzid5mciG5ecw011f',
            grant_type: 'password',
            username: this.state.email,
            password: this.state.password
        }

        fetch('http://127.0.0.1:8000/oauth/token', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then((response) => response.json())
        .then((responseData) => {

            Auth.setToken(responseData.access_token,responseData.expires_in+ Date.now());

            this.props.history.push("/dashboard");  

        })
    }
}

export default Login;

区别在于基于数组的函数：

handleClick = (event) => {}

成为：

handleClick (){}

在react.js中重定向

4 个答案: