How to properly wrap routes in react-router v5?

Question

the problem when I open /view route entire BaseLayout is rendering and I've tried many different ways still no luck

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

    }

Answer 1

If you use the render props instead of the component one and if you wrap the component you want to render using your BaseLayout like the above, it should work:

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

    }