我正在项目中嵌套路线。我有App.js,我在其中定义了路由,在组件内部我有更多的路由,我希望它们嵌套。唯一的问题是我的嵌套路由在连接到redux的组件中。嵌套路由无法正常工作。
我已经从官方文档中尝试过它,但它不起作用。
https://reacttraining.com/react-router/core/guides/philosophy
App.js
import { connect } from "react-redux";
import { withRouter, Route } from "react-router-dom";
function HowItWorks() {
return (
<div>
<h2 style={{ margin: 20 }}>How It Works</h2>
</div>
);
}
function AboutUs() {
return (
<div>
<h2 style={{ margin: 20 }}>About Us</h2>
</div>
);
}
class App extends React.Component {
render() {
return (
<div>
<Route path="/" exact component={HowItWorks} />
<Route path="/howitworks" exact component={HowItWorks} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/admin" component={AdminContainer} />
</div>
);
}
}
下面是我的Redux容器文件,它根据App.js中指定的路由调用。此外,我的App.js文件可能会在将来通过connect()方法连接到redux。
AdminContainer.js
import { connect } from "react-redux";
import MainDesktopComponent from "../components/Admin/MainDesktopComponent";
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => {
return {};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(MainDesktopComponent);
MainDesktopComponent.js
我试过这个,即在Switch内部给出嵌套路由以及许多不同的方式,但它不起作用。另请注意,我还想将道具传递给Dashboard组件,该组件将来自上面的redux容器组件,通过mapstatetoprops。
import React from "react";
import Dashboard from "./Dashboard";
import { Route } from "react-router-dom";
import { Switch } from "react-router";
function MainDesktopComponent(props) {
return (
<div>
<Switch>
<Route
exact
path="/admin/dashboard"
render={props => {
<Dashboard/>;
}}
/>
</Switch>
</div>
);
}
export default MainDesktopComponent;
我不确定但尝试这个怎么样?
<Switch>
<Route
exact
path="/admin/dashboard"
render={cProps => <Dashboard {...cProps} {...props} />}
/>
</Switch>
返回Route呈现组件。