首页 > 解决方案 > 注册后无法重定向到个人资料页面

问题描述

我只是想在从 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并且我通过传递componentDidMount钩子来查看配置文件组件是否安装,但它没有。用户数据在数据库上保存得很好,它给出了一个错误:

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

当我试图赶上发布请求时

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

我已经"proxy": "http://localhost:4000/"在 signup.js 中传递了 in package.json 和 withRouter API,但是,它不起作用。

注册.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);
    })

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

包.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"
  },

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

标签: node.jsreactjsreact-router

解决方案


推荐阅读