Question

我有一个名为Layout的组件，它应根据路由呈现不同的child components。父组件

export default class Layout extends Component{
    render(){
        return (
            <div>
                <div>
                    <div>
                        <Navbar/>
                        {this.props.sidebar}
                        {this.props.content}
                    </div>
                </div>
            </div>
        );
    }
}

在我的main.jxs中，我希望使用Layout component呈现 3路径，并将不同的ChildComponent作为侧边栏和内容道具传递：

<Route path="/profile" component={sidebar: <Sidebar />, content: <Content />} />
<Route path="/user" component={sidebar: <Sidebar />, content: <User />} />
<Route path="/edit" component={sidebar: <Sidebar />, content: <Edit />} />

也会导入组件。换句话说，我想基于路线动态地改变布局的内容。如何使用react-router-dom实现此目的？

Answer 1

您的方法是正确的，但您需要定义将显示布局的索引路径，而您的其他路径必须是子路径。

我用它作为

 <Route path="/" component={Layout} >
        <IndexRoute components={{ body: LandingPage }} />
        <Redirect from="appdetail/" to="/" />
        <Route path="appdetail/:applicationId" components={{ body: AppDetailPage }} />
 </Route>

比我的布局看起来像：

export class Layout extends React.Component<ILayoutProps, void> {

    /**
     * Renders this object.
     *
     * @return  A JSX.Element.
     */
    public render(): JSX.Element {

        const mainDivStyle: React.CSSProperties = {
            width: "100%",
            height: "100%",
            top: "0px",
            left: "0px",
            backgroundColor: "#f2f2f2",
            fontSize: "12px",
            fontFamily: "Gotham"
        };

        const contentDesktopStyle: React.CSSProperties = {
            height: "100%"
        };


        return (
            <div style={mainDivStyle}>
                    <div id="contentId" style={contentDesktopStyle}>
                        <Header />                        
                        { this.props.body }
                    </div>
            </div>
        );
    }
}

Answer 2

如果我说得对，你应该使用render func作为Route组件中的prop（反应路由器4）为了能够渲染出几个组件。见https://reacttraining.com/react-router/web/api/Route/render-func

我还提供了下一个小例子

https://jsfiddle.net/69z2wepo/85086/

在相同布局路径上的Dynimic子组件渲染

2 个答案: