Link tag not redirecting to the correct component

[darkyin87]

I am new to react and redux so any help would be appreciated.

configurestore.js

import {
    createStore, combineReducers, applyMiddleware, compose
}
from 'redux';
import * as middleware from '../middleware/index';
import {
    devTools, persistState
}
from 'redux-devtools';
import thunk from 'redux-thunk';
import * as reducers from '../reducers';
import {
    reduxReactRouter, routerStateReducer
}
from 'redux-router';
import React from 'react';
import createBrowserHistory from 'history/lib/createBrowserHistory';

// create a reducer
const createReducer = () => combineReducers({
    router: routerStateReducer,
    ...reducers
});

let rootReducer = createReducer();

export default function configureStore(initialState, routes) {
    const history = createBrowserHistory()
    const store = compose(
        reduxReactRouter({
            routes,
            history
        }),
        applyMiddleware(thunk, middleware.loggerMiddleware, middleware.crashReporterMiddleware, middleware.promiseMiddleware),
        devTools(),
        persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
    )(createStore)(rootReducer, initialState)
    return store;
}

routes.js

import React from 'react'
import {
    Redirect, Router, Route, DefaultRoute, IndexRoute
}
from 'react-router'
import {
    ReduxRouter
}
from 'redux-router'
import SignIn from '../containers/SignIn.jsx';
import SignUp from '../containers/SignUp.jsx';
import Home from '../containers/Home.jsx';
import Reset from '../containers/Reset.jsx';
import Root from '../containers/Root.jsx';

import WelcomePage from '../components/Home/WelcomePage.jsx';
import {replaceState} from 'redux-router';
import {requireAuthentication} from '../containers/AuthenticateComponent.jsx';
import InstallFlow from '../containers/InstallFlow.jsx';

const routes =
<Route path='/' component={Root}>
    <Route path='signin' component={SignIn}/>
    <Route path='signup' component={SignUp}/>
    <Route path='app' component={requireAuthentication(Home)}>
        <IndexRoute component={WelcomePage}/>
    <Route path='/install' component={InstallFlow}/>
    </Route>
    <Route path='reset' component={Reset} />
</Route>

export default routes;

I have a link tag in my WelcomePage.

<Link to='/install'>Install New Device</Link>

Expected: Transition to install page. Actual: URL gets updated, but the component does not get rendered.

Note: If I change the Link to an anchor tag, listen for the onclick event and do

dispatch(pushState(null, '/install'))

it does work

Again if I just do pushState, it does not redirect to the correct component

pushState(null, '/install')

Thanks in Advance

[Scarysize]

Take a look at the actions being dispatched in all your cases (pushState, dispatch(pushState) and Link). Are there differences in what actions are being dispatched or not dispatched?

[darkyin87]

@Scarysize When I do the pushState, Link I do not see any actions getting dispatched in the redux devTool.

[Scarysize]

Have you tried reordering in your compose function? First your middleware and afterwards the reduxReactRouter? Or maybe something in your middlewares is wrong...

[mjrussell]

@darkyin87 I'd like to see the component you were calling this from. My suspicion would be that pushState wasn't bound via Redux with the connect method which is why it never showed up in devTools