I have a new React/Redux app that I've recently ported over to the .NET Core 2.0 React/Redux template. I'm using some of the boilerplate but have mostly tried to strip out the things I'm not using. One of things I am trying to use, however, is some of the built in server-side prerendering. I'm running into a problem where the page is rendered correctly, but if I click a navigation button that is supposed to take me to a different component, it instead makes a call to the page controller (in my case the initial HomeController which is barebones), causing a whole new view to be rendered server-side. It still takes me to the right component, but not before doing a full postback. I feel like it's probably something small that I'm missing, but I can't seem to figure it out.

*NOTES:*

* If I use createHashHistory() instead of createBrowserHistory() in my boot-client.js, it'll route to my component correctly. However, I think get this error from React -

> 
> attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
> 
> 
> 

```
(client) eactid="4"><a href="#/" data-reactid="5"
 (server) eactid="4"><a href="/" data-reactid="5">

```

**Here are some of the files I have related to all of this:**

**boot-client.js**

```js
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HashRouter as Router, Switch, Link, Route, hashHistory, IndexRoute } from 'react-router-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState }  from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;

import { createStore, applyMiddleware } from 'redux'; 
import reduxThunk from 'redux-thunk';
import reducers from './reducers';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ baseName: '/' });

// Get the application-wide store instance, prepopulating with state from the server where available.
//const initialState = (window as any).initialReduxState as ApplicationState;
//const store = configureStore(history, initialState);

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);  
const store = createStoreWithMiddleware(reducers);

function renderApp() {
    // This code starts up the React app when it runs in a browser. It sets up the routing configuration
    // and injects the app into a DOM element.
    ReactDOM.render(
        <AppContainer>
            <Provider store={ store }>
                <ConnectedRouter history={ history } children={ routes } />
            </Provider>
        </AppContainer>,
        document.getElementById('app')
    );
}

renderApp();

// Allow Hot Module Replacement
if (module.hot) {
    module.hot.accept('./routes', () => {
        routes = require('./routes').routes;
        renderApp();
    });
}
```

**boot-server.js**

```js
import * as React from 'react';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { replace } from 'react-router-redux';
import { createMemoryHistory } from 'history';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { routes } from './routes';
import configureStore from './configureStore';

import { createStore, applyMiddleware } from 'redux'; 
import reduxThunk from 'redux-thunk';
import reducers from './reducers/index.js';

export default createServerRenderer(params => {
    return new Promise((resolve, reject) => {
        // Prepare Redux store with in-memory history, and dispatch a navigation event
        // corresponding to the incoming URL
        const basename = params.baseUrl.substring(0, params.baseUrl.length - 1); // Remove trailing slash
        const urlAfterBasename = params.url.substring(basename.length);

 //const store = configureStore(createMemoryHistory());

        const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);  
        const store = createStoreWithMiddleware(reducers);

       // store.dispatch(replace(urlAfterBasename));

        // Prepare an instance of the application and perform an inital render that will
        // cause any async tasks (e.g., data access) to begin
        const routerContext = {};

        const app = (
            <Provider store={ store }>
                <StaticRouter basename={ basename } context={ routerContext } location={ params.location.path } children={ routes } />
            </Provider>
        );

        renderToString(app);

        // If there's a redirection, just send this information back to the host application
        if (routerContext.url) {
            resolve({ redirectUrl: routerContext.url });
            return;
        }

        // Once any async tasks are done, we can perform the final render
        // We also send the redux store state, so the client can continue execution where the server left off
        params.domainTasks.then(() => {
            resolve({
                html: renderToString(app),
                globals: { initialReduxState: store.getState() }
            });
        }, reject); // Also propagate any errors back into the host application
    });
});
```

**routes.jsx**

```js
export const routes = <Layout>
    <Route exact path='/' component={ StartPage } />
    <Route path='/somecomp1' component={ SomeComponent1 } />
    <Route exact path='/somecomp2' component={ SomeComponent2 } />
    <Route path='/somecomp3' component={ SomeComponent3 } />
</Layout>;
```

**Layout.jsx**

```js
export default class Layout extends React.Component {
    render() { return <div style={{ backgroundColor: '#F8F8FF' }}>
            <SomeHeaderComponent />
            <div id='content'>
               { this.props.children }                   
            </div>
        </div>
    }
}
```