i have index.js that takes the routes from root . i need to access the store and get the variable navigate needs to be true after log in and initialy it is false
import React from "react";
import ReactDOM from "react-dom";
import { HashRouter, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import allReducers from "./Reducers";
import Root from "./root";
const store = createStore(allReducers, {}, applyMiddleware(ReduxThunk));
const loggedin = true;
ReactDOM.render(<Root store={store} />, document.getElementById("root"));
the root.js file is :
import React from "react";
import PropTypes from "prop-types";
import { Provider } from "react-redux";
import { HashRouter, Route, Switch } from "react-router-dom";
import Full from "./containers/Full/";
import { connect } from "react-redux";
// Views
import Login from "./views/Pages/Login/";
import Register from "./views/Pages/Register/";
import Page404 from "./views/Pages/Page404/";
import Page500 from "./views/Pages/Page500/";
const Root = ({ store }) => (
<Provider store={store}>
<HashRouter>
<Switch>
{/* <Route
exact="exact"
path="/login"
name="Login Page"
component={Login}
/> */}
<Route
exact="exact"
path="/register"
name="Register Page"
component={Register}
/>
<Route exact="exact" path="/404" name="Page 404" component={Page404} />
<Route exact="exact" path="/500" name="Page 500" component={Page500} />
{/* <Route path="/" name="Home" component={Full} /> */}
<Route
path="/"
render={() =>
this.props.navigate ? (
<Route component={login} />
) : (
<Route component={Full} />
)
}
/>
</Switch>
</HashRouter>
</Provider>
);
Root.propTypes = {
store: PropTypes.object.isRequired
};
const mapStateToProps = ({ authRed }) => {
const { navigate } = authRed;
console.log("navigation system ready:", navigate);
return { navigate };
};
export default connect(mapStateToProps, {})(Root);
my console log in mapstate to props i returning the exact needed data but if i use this.props.navigate error occurs cannot read property 'props' of undefined
does anyone have a solution ??
Your root component is a functional component
and doesn't have a this
keyword, you need to destructure
props and use it, just like you did store
const Root = ({ store, navigate }) => (
<Provider store={store}>
<HashRouter>
<Switch>
{/* <Route
exact="exact"
path="/login"
name="Login Page"
component={Login}
/> */}
<Route
exact="exact"
path="/register"
name="Register Page"
component={Register}
/>
<Route exact="exact" path="/404" name="Page 404" component={Page404} />
<Route exact="exact" path="/500" name="Page 500" component={Page500} />
{/* <Route path="/" name="Home" component={Full} /> */}
<Route
path="/"
render={() =>
navigate ? (
<Route component={login} />
) : (
<Route component={Full} />
)
}
/>
</Switch>
</HashRouter>
</Provider>
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.