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

Question

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

до add нажмите

history.location '/' location '/'

после add нажмите

history.location '/ add' location '/ 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;

Answer 1

Ваш Route с путем / будет использоваться для любого пути, отличного от /signin. Дайте ему exact реквизит, и он будет использоваться только для пути /.

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