I'm a react and redux beginner. I created a react app without redux and integrated React Router v4. Everything worked perfectly.
Then i integrated redux to the app so i can share the state. After this my router stopped working . So i thought to fix this i should integrated react-router-redux v5 (I actually learned that you don't have to add react-router-redux to make router work. It's there to update redux state about router info) . Still routers are not working.
When i click a link that should load a router , browser url change to the correct router url and redux router state change to correct router(observed this using react dev tools). If i refresh the page , component related to router will load.
File that i configured redux store
/**
* Created by Shane on 5/12/2017.
*/
import { createStore,combineReducers,applyMiddleware,compose } from 'redux'
import {authenticationReducer} from './../reducers/index'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let configureStore = () => {
const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {};
let reducer=combineReducers({
authenticationData:authenticationReducer,
router:routerReducer,
form: formReducer // <---- Mounted at 'form'
});
//creating the store using reducer
let store=createStore(reducer,
persistedState,
compose(applyMiddleware(thunk,routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
store.subscribe(() => {
// console.log("Current State",store.getState());
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
});
return store;
};
module.exports ={
history,
configureStore
};
This is my main file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import {Provider} from 'react-redux'
import Base from './base/Base';
import 'mdi/css/materialdesignicons.css'
import './index.css';
import * as storeConfig from './redux/store/store'
import { ConnectedRouter } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
let store=storeConfig.configureStore();
const history = storeConfig.history;
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Base />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
Base file where i defined routes
import React from 'react';
import { Grid } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import {connect} from 'react-redux'
import Content from '../Content';
import AppNavBar from '../nav_bar/app_nav_bar/AppNavBar';
import './Base.css';
import Login from "../login/Login";
import Profile from "../profile/Profile";
import MyApps from "../my_apps/MyApps";
import NewAppBase from "../new_app/new_app_base/NewAppBase";
import {Route} from "react-router";
class Base extends React.Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
}
render() {
//let {dispatch} =this.props;
let content=(<div></div>);
// dispatch(action.apiLogIn("y2kshane","Abcd1234"));
if(this.props.isLogged)
{
content=(
<Grid className="Parent-container">
<Row>
<Col xs={12} md={12}> <AppNavBar/></Col>
</Row>
<Row >
<Col xs={12} md={12} className="content">
{/*<Content/>*/}
<Route exact path='/profile' component={Profile}/>
<Route exact path='/my-apps' component={MyApps}/>
<Route exact path='/new-app' component={NewAppBase}/>
</Col>
</Row>
</Grid>
);
}else {
content=(<Login/>);
}
return (
<span>{content}</span>
);
}
}
export default connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base);
AppNavBar File where i call the routes
/**
* Created by admin on 4/27/2017.
*/
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { NavItem,NavDropdown,MenuItem } from 'react-bootstrap';
import './AppNavBar.css';
import {connect} from "react-redux";
import * as action from './../../redux/actions/index'
import {push} from "react-router-redux";
class AppNavBar extends Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
// this.navigateTo.bind(this);
}
logout = () => {
console.log("calling logot");
this.props.dispatch(action.logoutAction())
};
navigateTo = (url) =>
{
this.props.dispatch(push(url))
};
render() {
return (
<Navbar className="nav-bar" collapseOnSelect>
<Navbar.Header >
<Navbar.Brand className="nav-bar-text">
<a href="#">Dev Dashboard</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
{/*<LinkContainer to="/profile">*/}
<NavItem eventKey={1} onClick={() => this.navigateTo("/profile")}>Profile</NavItem>
{/*</LinkContainer>*/}
{/*<LinkContainer to="/my-apps">*/}
<NavItem eventKey={2} onClick={() => this.navigateTo("/my-apps")}>My Apps</NavItem>
{/*</LinkContainer>*/}
<NavItem eventKey={2} href="#" className="nav-bar-text">Reports</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">API Browser</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">Knowledge Base</NavItem>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={3} title={this.props.username} id="basic-nav-dropdown">
{/*<NavBarUser/>*/}
<MenuItem eventKey={3.1}>Settings</MenuItem>
{/*<MenuItem eventKey={3.2}>Another action</MenuItem>*/}
{/*<MenuItem eventKey={3.3}>Something else here</MenuItem>*/}
<MenuItem divider />
<MenuItem eventKey={3.3} onClick={this.logout} ><b>Logout</b></MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default connect(
(state) => {
return {
username : state.authenticationData.userName
}
}
)(AppNavBar);
I have been trying to fix this for like 2 days now :( . Please help me. Thanks.
So it turns out you have to wrap your component that has your routes , using withRouter . I think this is some issue related to redux connect.
export default withRouter(connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base));
Complete Code
import React from 'react';
import { Grid } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import {connect} from 'react-redux'
import Content from '../Content';
import AppNavBar from '../nav_bar/app_nav_bar/AppNavBar';
import './Base.css';
import Login from "../login/Login";
import Profile from "../profile/Profile";
import MyApps from "../my_apps/MyApps";
import NewAppBase from "../new_app/new_app_base/NewAppBase";
import {Route, withRouter} from "react-router-dom";
class Base extends React.Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
}
render() {
//let {dispatch} =this.props;
let content=(<div></div>);
// dispatch(action.apiLogIn("y2kshane","Abcd1234"));
if(this.props.isLogged)
{
content=(
<Grid className="Parent-container">
<Row>
<Col xs={12} md={12}> <AppNavBar/></Col>
</Row>
<Row >
<Col xs={12} md={12} className="content">
{/*<Content/>*/}
<Route exact path='/profile' component={Profile}/>
<Route exact path='/my-apps' component={MyApps}/>
<Route exact path='/new-app' component={NewAppBase}/>
</Col>
</Row>
</Grid>
);
}else {
content=(<Login/>);
}
return (
<span>{content}</span>
);
}
}
export default withRouter(connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base));