如何在 react-router v5 中正确包装路由?

How to properly wrap routes in react-router v5?

当我打开 /view 路由整个 BaseLayout 时出现问题,我尝试了很多不同的方法仍然没有成功

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
    function App() {
      return (
        <Router>
                <Root>
                    <Route path="/" exact component={Home}/>
                    <BaseLayout>
                        <Route path="/dashboard" exact component={Dashboard} />
                        <Route path="/sa" exact component={sample} />
                    </BaseLayout>
                    <Route path="/view" exact component={Post} />
                </Root>
        </Router>
      );

    }

如果您使用 render 道具而不是 component 道具,并且如果您像上面那样使用 BaseLayout 包装要渲染的组件,它应该可以工作:

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
    function App() {
      return (
        <Router>
                <Root>
                    <Route path="/" exact component={Home}/>
                    <Route path="/dashboard" exact render={() => (
                      <BaseLayout><Dashboard /></BaseLayout>
                    )} />
                    <Route path="/sa" exact render={() => (
                      <BaseLayout><sample /></BaseLayout>
                    )} />
                    <Route path="/view" exact component={Post} />
                </Root>
        </Router>
      );

    }