How to make the header have links, and components are rendered in .content?

Question

React

In the main Vue file I had this:

<template>
  <div class="container">
    <div class="service" v-if="$route.name !== 'Login' && $route.name !== 'Logout'">
      <Header></Header> <- тут ссылки
    </div>
    <div class="content">
      <div style="height: 16px;"></div>
      <router-view/> <-- здесь рендерятся маршруты
      <div style="height: 64px;"></div>
    </div>
  </div>
</template>

How to port this to React?
Already in the React project in the header component I did this:

export default function TheHeader() {
    return (
        <div className="header-container">
            <div className="header">
                <nav className="header-navigation">
                    <Router>
                        <Link to="/" className="header-mobile-menu-item">
                        </Link>
                        <Link to="/articles" className="header-mobile-menu-item">
                        </Link>
                        <Link to="/files" className="header-mobile-menu-item">
                        </Link>
                    </Router>
                </nav>
            </div>
        </div>
    )
}

And the second RouterView component:

export default function RouterView(){
    return (
        <Router>
            <Switch>
                <Route exact path="/">
                    <Index/>
                </Route>
                <Route path="/articles">
                    <Articles/>
                </Route>
                <Route path="/files">
                    <Files/>
                </Route>
            </Switch>
        </Router>
    )
}

Total:

export default function App(props) {
    const contentStyle = {
        height: '16px'
    }
    const contentStyle2 = {
        height: '64px'
    }
    return (
        <div id="app">
            <div className="container">
                <div className="service">
                    <TheHeader/>
                </div>
                <div className="content">
                    <div style={contentStyle}/>
                    <RouterView/>
                    <div style={contentStyle2}/>
                </div>
            </div>
        </div>
    )
}

But something is not working normally. The links in the header switch, the url changes, but the RouterView does not react in any way.
In general, the question is: how to make sure that there are links in the header, and components are rendered in .content?

Answer 1

Routershould be general.