注册后无法重定向到个人资料页面

时间:2019-03-31 12:46:23

标签: node.js reactjs react-router

从NodeJS服务器文件进行验证后,我只想在注册到个人资料页面后重定向用户。我已经像这样通过index.js中的路由了

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

import Home from './pages/home';
import Signup from './pages/signup';
import Signin from './pages/signin';
import Profile from './pages/profile';

ReactDOM.render(
    <Router>
     <div>
      <Route exact path="/" component={Home} />
      <Route path="/signup" component={Signup} />
      <Route path="/signin" component={Signin} />
      <Route path="/profile" component={Profile} />
     </div>
    </Router>, 
    document.getElementById('root')
);`

。我已经使用this.props.history进行了重定向,并且还使用withRouter导出了Signup组件,但我很麻烦,以查看Profile组件是否通过传递componentDidMount挂接来挂载,但事实并非如此。用户数据在数据库上保存得很好,并且出现错误:

  

此处请求失败,状态码为404

当我尝试赶上发帖请求和

  

xhr.js:173 GET http://localhost:3000/profile 404(未找到)

我已经在package.json中传递了"proxy": "http://localhost:4000/",并在signup.js中传递了Router API,但是,它没有用。

  

signup.js

import React, { Component } from 'react';
import axios from 'axios';
import queryString from 'querystring';

import { Link, withRouter, Redirect } from 'react-router-dom';

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
      repassword: ''
    }
  }

  handleUsernameChange = (e) => {
     e.preventDefault();
     this.setState({
       username: e.target.value
     })
  }

  handlePasswordChange = (e) => {
    e.preventDefault();
    this.setState({
      password: e.target.value
    })
  }


  handlePasswordConfirmChange = (e) => {
    e.preventDefault();
    this.setState({
      repassword: e.target.value
    })
  }


  handleSubmit = (e) => {
    e.preventDefault();

    axios.post('/signup', {
      username: this.state.username,
      password: this.state.password,
      repassword: this.state.repassword
    }).
      then( res => {
        this.props.history.push('/profile');
    }).catch(err => {
      console.log('Here', err.message);
    })

我尝试通过importing Redirect from react-router-dom来尝试react-router-dom的Redirect API,然后用this.props.history.push('\profile')替换return <Redirect to='\profile' />,但它给了我Proxy error: Could not proxy request /signup from localhost:3000 to http://localhost:4000/

  

package.json

"dependencies": {
    "axios": "^0.18.0",
    "query-string": "^6.4.2",
    "react": "^16.8.5",
    "react-bootstrap": "^1.0.0-beta.6",
    "react-dom": "^16.8.5",
    "react-router-dom": "^4.2.2",
    "react-scripts": "2.1.8"
  },

任何帮助,建议将不胜感激,谢谢!!

0 个答案:

没有答案