Novice learning react-redux problem - Codes Helper

redux rookie, want to write a demo, with react-redux click login to transfer data

index.js:

const store = createStore(reducer)
ReactDOM.render(
    (
        <Provider store = {store}>
            <Router>
                <div>
                    <Route exact path="/" component={App}/>
                    <Route path="/main" component={main}/>
                </div>
            </Router>
        </Provider>
    ),
    document.getElementById("root")
)

APP.js:

import React, {Component} from "react";
import "./App.css";
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import {login} from "./action/action"

class App extends Component {
    clickLogin(event) {
        this.props.login;
        this.props.history.push("/main/router");
    }
    render() {
        return (
            <div className="App">
                <button onClick={this.clickLogin.bind(this)}></button>
            </div>
        );
    }
}


const mapStateToProps = (state, ownProps) => {
    return {
        msg: state.msg ? state.msg : ownProps.msg
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        login:bindActionCreators(login,dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

action.js:

const actions = {
    sendShowChineseMsg: () => ({ type: "chinese" }),
    sendShowEnglishMsg: () => ({ type: "english" })
}

export function login() {
    return dispatch=>{
        dispatch(actions.sendShowChineseMsg())
    }
}

reducer:

const reducer = (state = {}, action) => {
    switch (action.type) {
        case "chinese":
            return {
                state,
                msg: "Redux"
            }
        case "english":
            return {
                state,
                msg: "This is Redux"
            }
        default:
            return state
    }
}

export default reducer;

router:

import React, { Component } from "react";

class router extends Component {
    render() {
        return (
            <div className="App">
                <h1>{this.props.msg}</h1>
            </div>
        );
    }
}

export default router;

tell me where there is a problem. The information of msg cannot be displayed in router