参数不起作用的反应路由器答案

【问题标题】：React Router with parameters not working参数不起作用的反应路由器
【发布时间】：2016-12-04 14:21:28
【问题描述】：

我有一个待办事项应用程序，我正在尝试选择一个项目并将其发送到要编辑的页面。我看过这篇帖子Getting query parameters from react-router hash fragment 并注意到他们正在使用this.props.location.query

我想要完成的是获取查询参数并将其显示在输入框中进行编辑。

import * as React from 'react'
import { Router, Route, IndexRoute, hashHistory, browserHistory, Link }     from 'react-router'
import {ITask, IStoreAction, ActionType} from '../model/TasksModel'

import store from '../store/Store'

interface TaskEditProp {
task: ITask

}

class TaskEdit extends React.Component<TaskEditProp, {}>{
constructor() {
    super();
    this.state = store.getState()

    store.subscribe(() => {
        this.setState(store.getState())
    })

    //todo: console.log(this.props.location);

}

onSave = (e) => {
    e.preventDefault();
    var refs: any = this.refs;
    var task: ITask = {
        index: this.props.task ? this.props.task.index : 0,
        text: refs.text.value,
        done: false
    }

    var storeAction: IStoreAction = {
        type: ActionType.EDIT_TASK,
        task
    }

    store.dispatch(storeAction)
    browserHistory.push('/')
}

onCancel = (e) => {
    e.preventDefault();
    browserHistory.push('/')
}

render() {

    const { props: { children } } = this;
    return (
        <div className="">
            <h3>Edit Task</h3>
            <form onSubmit={this.onSave}>
                <fieldset className="form-group">
                    <label for="task">Task</label>
                    <input type="text" ref="text" className="form-control" >{this.props.location}</input>
                </fieldset>
                <div className="btn-group">
                    <button className="btn btn-primary" >Save</button>
                    <button className="btn btn-warning" onClick={this.onCancel} >Cancel</button>
                </div>
            </form>

        </div>
    )
}
}

export default TaskEdit;

我假设我的界面不包含位置，所以道具不知道位置。

我的路线是这样定义的：

var Routes = (
    <Router history={browserHistory}>
        <Route path="/" component={Tasks}>
            <IndexRoute component={TaskList} />
            <Route path="/add" component={TaskAdd} />
            <Route path="/edit/:id" component={TaskEdit} />
        </Route>
        <Route path="/about" component={About}/>
    </Router>
)

在我的商店被派出后，我打电话给browserHistory.push('/edit/'+task.index)，它将我发送到正确的视图，但我无法访问查询参数。我的其余代码可以在https://github.com/crh225/HotReactAsp/tree/master/src/HotReactAsp/content找到，谢谢！

【问题讨论】：

标签： typescript redux react-router

【解决方案1】：

您可以打印您的this.props 以查看道具的呈现方式并找到提取所需数据的正确方法。

我不知道您使用的是哪个版本的 react-router，但我知道获取查询参数的正确方法是：

let { id } = this.props.params;

还有这个

index: this.props.task ? this.props.task.index : 0,

将会

index: this.props.params.id ? this.props.params.id : 0,

【讨论】：

【解决方案2】：

我确定您现在已经解决了这个问题，但是您需要使用 routerProps 扩展您的接口。你需要@types:react-router-dom

Import { withRouter, Switch, Route, NavLink, RouteProps } from 'react-router-dom';

interface TaskEditProp extends RouteProps {
    task: ITask
}

【讨论】：