Я приведу упрощенный пример настройки, которую я обычно использую. Итак, что насчет этого подхода?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Provider from "react-redux/es/components/Provider";
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
// Usually I would do this in an external file, but here I'm configuring my store
const myStore = configureStore(initialState) {
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk)
);
}
// After that, I'm wrapping my App component inside of the Provider and passing in the configured store
ReactDOM.render((
<Provider store={myStore }>
<App/>
</Provider>
), document.getElementById('root'));
App.js
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import PrimaryLayoutContainerComponent from "../containers/PrimaryLayoutContainer";
// In my App.js I'm wrapping my primary layout container with BrowserRouter to get access to the history and also passing in the props
class App extends Component {
render() {
return (
<BrowserRouter>
<PrimaryLayoutContainerComponent {...this.props}/>
</BrowserRouter>
);
}
}
export default App;
PrimaryLayoutContainerComponent.js
В этом (основном контейнере) я бы в полной мере воспользовался моими предыдущими конфигами, а также всем, что предлагается и требуется в отношении управления состоянием Redux. На этом этапе я также использую withRouter, чтобы получить доступ к свойствам объекта истории.
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as myActions from '../actions';
import PrimaryLayout from "../components/layout/PrimaryLayout";
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
class PrimaryLayoutContainerComponent extends Component {
render() {
return (
<div>
//Here we pass our history as props
<PrimaryLayout history={this.props.history}
propsX={this.props.propsX}
propsY={this.props.actions.propsY}
/>
</div>
)
}
}
// In these (and all other cases) I would highly recommend using propTypes.
// They could give you the answer in where the issues might be in your future development
PrimaryLayoutContainerComponent.propTypes = {
loggedUser: PropTypes.string,
actions: PropTypes.object.isRequired
};
const mapStateToProps = (state) => {
return { xxxx }
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(myActions, dispatch)
};
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PrimaryLayoutContainerComponent));
... и, наконец, в моем Primary Layout Component я бы определил все свои маршруты следующим образом:
PrimaryLayoutComponent.js
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
// ... import all my compoenents
class PrimaryLayout extends Component {
constructor(props) {
super(props);
this.state = {
currentRoute: '' // I would use the state to dynamically change the
// routes depending on which one was clicked
}
}
componentWillReceiveProps(nextProps) {
this.setState({
currentRoute: nextProps.history.location.pathname
})
}
componentWillMount() {
this.setState({
currentRoute: this.props.history.location.pathname
})
}
render() {
const { currentRoute } = this.state;
return (
<div className="wrapper">
<header className="xxxx" role="banner">
<div className="container">
<div className="xxxxx">
<Link to="/home">
<img src={logo} alt="your logo"/> Your App Name
</Link>
<ul className="navbar__menu">
<li className={currentRoute === "/home" ? "active" : ""}>
<Link to="/home"> Home </Link>
</li>
<li className={currentRoute === "/componentOne" ? "active" : ""}>
<Link to="/componentOne"> componentOne</Link>
</li>
<li className={currentRoute === "/componentTwo" ? "active" : ""}>
<Link to="/componentTwo"> componentTwo</Link>
</li>
</ul>
</div>
</div>
</header>
// At the very end, I'm using the Switch HOC and defining my routes inside of a main tag
<main>
<Switch>
<Route path='/home' component={HomeContainerComponent} />
<Route path='/componentOne' component={componentOne} />
<Route path='/componentTwo' component={componentTwo} />
<Redirect to="/home"/>
</Switch>
</main>
</div>
)
}
}
export default PrimaryLayout;
Я надеюсь, что мой подход был полезен для вас, и если у вас есть какие-либо дополнительные вопросы, пожалуйста, дайте мне знать. Я отвечу им как можно скорее