Question

我想在向api提交axios请求并收集有效回复后重定向到我的主路线。可以看出，我试图使用上下文，但在这种情况下我得到一个错误＆＃34;上下文未定义＆＃34;。在这种情况下，我如何导航到我的家庭路线？我尝试使用history.push，但似乎也没有用。任何想法将不胜感激？

import React, {Component} from 'react'
import axios from 'axios'
import Home from './Home'
import {
  BrowserRouter,
  Link,
  Route
} from 'react-router-dom'

class SignUp extends Component {

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

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = () => {
    axios
      .post('http://localhost:9000/signup',{
        email: this.state.email,
        password: this.state.password
      }).then(function(response){
        console.log(response.data.success)
        this.context.router.push('/home');
      })
  }
  render(){
    return(
      <BrowserRouter>
        <Route path="/" render={() => (
          <div>
            <h1> Sign Up</h1>
            <input name="email" placeholder="enter your email" onChange={e => this.handleChange(e)}/>
            <br/>
            <input name="password" placeholder="enter your password" onChange={e => this.handleChange(e)}/>
            <br/>
            <button onClick={() => this.handleClick()}>submit</button>
            <Route exact path="/home" component={Home}/>
          </div>
        )}/>
      </BrowserRouter>
    )
  }
}

SignUp.contextTypes = {
  router: React.PropTypes.func.isRequired
};

export default SignUp

Answer 1

路由应始终高于所有组件（或容器）。然后，当一个组件是“内部”路由器（在你的情况下是BrowserRouter）时，它将获得对其上下文的访问权。

你也有另一个内部渲染功能根本没有意义。

所以这样的事情应该有效：

import React, {Component} from 'react'
import axios from 'axios'
import Home from './Home'
import {
  BrowserRouter,
  Link,
  Route
} from 'react-router-dom'

class SignUp extends Component {

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

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = () => {
    axios
    .post('http://localhost:9000/signup',{
        email: this.state.email,
        password: this.state.password
    }).then(function(response){
        console.log(response.data.success)
        this.context.router.push('/home');
    })
  }

  render(){
    return(
      <div>
      <h1> Sign Up</h1>
      <input name="email" placeholder="enter your email" onChange={e => this.handleChange(e)}/>
      <br/>
      <input name="password" placeholder="enter your password" onChange={e => this.handleChange(e)}/>
      <br/>
      <button onClick={() => this.handleClick()}>submit</button>
      </div>
      )
   }
}

SignUp.contextTypes = {
  router: React.PropTypes.func.isRequired
}; 

class App extends Component {
  render() {
    return(
      <BrowserRouter>
        <Route path="/" component={SignUp} />
        <Route exact path="/home" component={Home}/>
      </BrowserRouter>)
    }
 }

 export default App;

当然，将SignUp组件移动到独立文件，以保持项目清洁和结构良好。

使用反应路由器导航

1 个答案: