找不到具有參數的路線

Question

找到問題的解決方案后，我遇到了另一個問題。 在將路由參數添加到我的路由后，react路由器不再識別它。

組件渲染新路線

import React, { Component } from 'react'
import { hashHistory } from 'react-router'

class Name extends Component {
  constructor() {
    super();
    this.state = {username: ''};
    this.onClickFunction = this.onClickFunction.bind(this)
  }

  onClickFunction(e) {
    this.setState({username: e.target.value})
  hashHistory.push({
    pathname: '/level/' + this.state.username
  })
}

  render() {
    return (
      <div className="row">
        <div className="col-md-12">
          <div className="nameBox">
            <form className="form-inline">
              <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} />
              <button type="submit" className="btn btn-success" onClick={ this.onClickFunction }>Submit</button>
            </form>
          </div>
        </div>
      </div>
    )
  }
}

export default Name


import React from 'react'
import { Router, Route, hashHistory } from 'react-router'
import Home from './Home.js'
import Name from './Name.js'
import Level from './level.js'
import Level1 from './level1.js'
import Level2 from './level2.js'
//import result from './result.js'

const routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Home} >
      <Route path='/name' component={Name} />
      <Route path="/level/:username" component={Level} />
      <Route path='/level1' component={Level1} />
      <Route path='/level2' component={Level2} />
    </Route>
</Router>
);

export default routes;

我是React的新手，這是我的第一個幫助學習它的應用程序。 我已經四處搜尋，雖然分布廣泛，但這個問題似乎模棱兩可。 任何幫助將不勝感激！ 謝謝！

Answer 1

利用this.context.router.push()發送動態路由，以及event e不引用輸入但event e引用按鈕，因此e.target.value不會給出輸入的值。 您應該實現onUpdateUser函數以使用輸入值更新狀態

import React, { Component } from 'react'
import { hashHistory } from 'react-router'

class Name extends Component {
  constructor() {
    super();
    this.state = {username: ''};
    this.onClickFunction = this.onClickFunction.bind(this);
    this.onUpdateUser = this.onUpdateUser.bind(this);
  }
  static contextTypes = {
     router: React.PropTypes.object
  }

  onClickFunction() {
    this.context.router.push({
       pathname: '/level/' + this.state.username
    })
}
onUpdateUser(e) {
   this.setState({username: e.target.value});
}
  render() {
    return (
      <div className="row">
        <div className="col-md-12">
          <div className="nameBox">
            <form className="form-inline">
              <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser.bind(this)} />
              <button type="button" className="btn btn-success" onClick={ this.onClickFunction.bind(this) }>Submit</button>
            </form>
          </div>
        </div>
      </div>
    )
  }
}

export default Name