Reactjs 如何在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>
      );

    }

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route}；
函数App（）{
返回(
);
}

如果您使用

渲染

道具而不是

组件

道具，并且如果您使用

基本布局

包装要渲染的组件，如上文所述，它应该可以工作：

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>
      );

    }

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route}；
函数App（）{
返回(
 (
)} />
 (
)} />
);
}

尝试使用包装您的

路由。

仍然尝试。问题仍然存在请发布一些示例URL和相关组件以呈现。提供的代码片段指示尝试了什么，但不是期望的结果。谢谢它工作了，但有一个问题是如何添加未找到我试图在底部添加的路线，但再次未找到渲染每个路线我不明白你的确切意思。请创建一个codesandbox，以便更容易地帮助您。您不需要添加

render

属性<代码>允许简单地使用子元素，甚至推荐使用：推荐的使用子元素呈现内容的方法是使用子元素，如上所示。