React Router / WithRouter не перенаправляет даже с WithRoute

user3241846 спросил: 07 октября 2018 в 10:25 в: reactjs

У меня достаточно простое приложение для реагирования. У меня есть две кнопки / действия, которые перенаправляют. sign out и add. выход работает, а добавление - нет.

до add щелкните

history.location '/' location '/'

после add щелкните

history.location '/ add' '/ add'

, но связанный компонент не отображает.

router.js

let appHistory = createHistory();const appRouter = () => (
    <Router history={appHistory}>
        <Switch>
            <Route path="/signin" component={SignInUp} exact={true} />
            <Route path="/" component={Landing} />
            <Route path="/add" component={CreateEvent} />
            <Route path="/eventview" component={EventDetails} />
        </Switch>
    </Router>
)

Основной компонент

import React, {Component} from 'react';
import RequireAuth from './RequireAuth';
import {startSignOut} from '../actions/auth';
import {fetchEvents} from '../actions/event';
import {connect} from 'react-redux';
import {withRouter} from 'react-router';
import EventItem from './EventItem';
import Header from './Header';const EventDisplay = class EventDisplay extends Component {    componentDidMount = () => {
        this.props.fetchEvents();
    }    handleAddEvent = () => {
        console.log(this.props);
        this.props.history.push('/add');
    }    handleSignOut = () => {
        this.props.startSignOut();
    }    render() {
        return (
            <div>
                <Header signOut={this.handleSignOut}/>                {
                    this.props.events.map((event, ind) => {
                        return <EventItem key={ind} history={this.props.history} index={ind + 1} event={event}/>
                    })
                }
                <button onClick={() => this.handleAddEvent()}>+</button>
            </div>
        )
    }
}const mapDispatchToProps = (dispatch) => ({
    startSignOut: () => startSignOut(dispatch),
    fetchEvents: (userId) => dispatch(fetchEvents(userId))
});const mapStateToProps = (state) => ({
    events: state.events
})const connectedWithRouter = withRouter(connect(mapStateToProps, mapDispatchToProps)(RequireAuth(EventDisplay)));export default connectedWithRouter;

Header.js

const Header = (props) => {
    return (
        <div>
            <h2>Eventio</h2>
            <span>circle</span>
            <span>user</span>
            <button onClick={() => props.signOut()}>Sign out</button>
        </div>
    )
}export default Header;

0 ответов