无法读取未定义的反应redux[重复]的属性'历史'

Question

我在Submit上有一个表单，它必须路由到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.

组件/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-router dom时，我应该使用react-redux路由器吗？我需要安装一些插件还是withrouter。我不知道。有人能告诉我哪里出了问题吗？

Answer 1

您需要在路由器中传递历史={浏览器历史}。类似这样的东西