如何在 react-router v5 中正确包装路由？答案

【问题标题】：How to properly wrap routes in react-router v5?如何在 react-router v5 中正确包装路由？
【发布时间】：2019-09-22 13:06:22
【问题描述】：

当我打开 /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>
      );

    }

【问题讨论】：

尝试使用Switch 包裹你的Routes。
试了还是有问题
请发布一些示例 URL 和相关组件以进行渲染。提供的代码 sn-p 表示尝试了什么，但不是预期的结果。谢谢！

标签： reactjs react-router react-router-v5

【解决方案1】：

如果您使用 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>
      );

    }

【讨论】：

它工作但一个问题如何添加没有找到我试图在底部添加的路线但又找不到渲染每条路线
我不明白你的意思。请创建一个代码框，以便更轻松地为您提供帮助。
您不需要添加render 属性。 <Route> 允许简单地使用子元素，official documentation 甚至推荐它：使用渲染事物的推荐方法是使用子元素，如上所示。