I have looked at the example but can't seem to get it to work, At the moment my index.js looks like this, I don't have any server side rendering:
import React from 'react'
import ReactDOM from 'react-dom'
import getRoutes from './config/routes'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as reducers from 'redux/modules'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import { routerReducer, syncHistoryWithStore, routerMiddleware, replace } from 'react-router-redux'
import { browserHistory } from 'react-router'
const historyMiddleware = routerMiddleware(browserHistory)
let reducer = combineReducers({...reducers, routing: routerReducer})
const store = createStore(
reducer,
compose(applyMiddleware(ReduxThunk, historyMiddleware),
window.devToolsExtension ? window.devToolsExtension() : f => f))
const history = syncHistoryWithStore(browserHistory, store)
export function checkAuth () {
console.log('Route onEnter CheckAuth function Ran')
if (store.getState().users.isFetching === true) {
return
}
const isAuthed = store.getState().users.isAuthed
if (isAuthed === true) {
if (store.getState().routing.locationBeforeTransitions.pathname === '/') {
store.dispatch(replace('feed'))
console.log('CheckAuth function changed the path to feed')
} else {
console.log('CheckAuth function ran & User is Authed but path is not /')
return
}
} else {
if (store.getState().routing.locationBeforeTransitions.pathname !== '/') {
store.dispatch(replace('/'))
console.log('CheckAuth function changed the path to /')
}
}
}
export function errorAuth () {
if (store.getState().users.isFetching === true) {
return
}
const isAuthed = store.getState().users.isAuthed
if (isAuthed === true) {
replace('/feed')
} else {
replace('/')
}
}
const App = () => (
<MuiThemeProvider>
<Provider store = {store}>
{getRoutes(checkAuth, history, errorAuth)}
</Provider>
</MuiThemeProvider>
)
ReactDOM.render(
<App/>,
document.getElementById('app')
)
import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import { MainContainer, HomeContainer, FeedContainer } from 'containers'
import {Error404} from 'components'
export default function getRoutes (checkAuth, history, errorAuth) {
return (
<Router history={history}>
<Route path='/' component={MainContainer}>
<IndexRoute component = {HomeContainer} onEnter = {checkAuth}/>
<Route path='feed' component = {FeedContainer} onEnter = {checkAuth}/>
<Route path='*' component = {Error404} />
</Route>
</Router>
)
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent