Question

我有一个表单onsubmit，它必须路由到list.js。单击“添加文章”按钮时，如何路由到list.js以显示所有文章当我遇到以下错误

                   TypeError: Cannot read property 'history' of undefined
                ConnectedForm.handleSubmit
                E:/reacr-redux/src/components/Form.js:31
                28 |     const id = uuidvl();
                29 |     this.props.addArticle({ title , id });
                30 |     this.setState({title:''});
                > 31 |     this.props.router.history.push('/List');
                    | ^  32 | }                
                33 | render(){
                34 |     const {title}=this.state;
                View compiled
                ▶ 18 stack frames were collapsed.
                This screen is visible only in development. It will not appear if the app crashes in production.
                Open your browser’s developer console to further inspect this error.

components / form.js

                import React ,{ Component } from 'react';
            import {connect} from 'react-redux';
            import uuidvl from 'uuid';
            import { addArticle } from '../js/actions/index';
            import PropTypes from 'prop-types';
            const mapDispatchtoProps= dispatch=>{
                return{
                    addArticle:article =>dispatch(addArticle(article))
                };};
            class ConnectedForm extends Component{
                constructor(){
                    super();
                    this.state={
                        title:''
                    } }
                static contextTypes={
                    router:PropTypes.object,
                }
                handleChange(eVal,nm){
                    this.setState({"title":eVal})
                }                    
                handleSubmit(ev){
                    ev.preventDefault();
                    const { title }=this.state;
                    const id = uuidvl();
                    this.props.addArticle({ title , id });
                    this.setState({title:''});
                    this.props.router.history.push('/List');
                }                
                render(){
                    const {title}=this.state;
                    return(
                        <div>
                            <form onSubmit={this.handleSubmit.bind(this)}>
                                <input type='text' value={title} id="title" onChange={(e)=>this.handleChange(e.target.value,'article')}/>
                                <button type="submit">Add</button>
                            </form>
                        </div>
                    );} }
            const Form =connect(null,mapDispatchtoProps)(ConnectedForm);
            export default Form;

src / index

                    import index from "./js/index";
                import React from 'react';
                import { render } from 'react-dom';
                import { Provider } from 'react-redux';
                import store from './js/store/index';
                import App from './App';
                import * as serviceWorker from './serviceWorker';
                import { BrowserRouter as Router , Route , Switch } from 'react-router-dom';
                import Form from './components/Form';
                import List from './components/List';
                import Userdashboard from './components/unimoniC/Userdashboard';
                render(
                    <Provider store={store}>
                        <Router>
                            <Switch>
                                <Route exact path="/" component={App}/>
                                <Route path="/Form" component={Form}/>
                                <Route path="/List" component={List}/>
                                <Route path="/Userdashboard" component={Userdashboard}/>
                            </Switch>
                        </Router>
                    </Provider>
                , document.getElementById('root'))
                serviceWorker.unregister();

我应该使用React Redux路由器吗？我是否需要安装一些插件或withrouter。我不知道。谁能让我知道我要去哪里错了？

Answer 1

您需要在路由器中传递history={browserHistory}。像这样的<Router history={browserHistory}>。并以历史为道具。可以从browserHistory导入react-router-dom

TypeError：无法读取未定义反应redux的属性“ history”

1 个答案: