React Router hide App content when click other pages link

Question

I want to hide app component content when I click on other component pages link.

Right now, when I click other links like about us, then it shows both app component and about us page component. But I want show only about us content once I click on about us page.

Also, when I define App component patch as a "/" then application keeps loading.

Below are the code

App.js

import React, { Component } from "react";
import Navigation from "./components/Navigation";

import data from "./data";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      // data: false
    };
  }

  render() {
    return (
      <div className="container">
        <Navigation />
        {data.map((link) => (
          <div className="card mb-3" key={link.Title}>
            <div className="row no-gutters">
              <div className="col-md-5">
                <img
                  src={require("./images/" + link.Img)}
                  className="card-img"
                  alt=""
                />
              </div>
              <div className="col-md-7">
                <div className="card-body">
                  <h5 className="card-title">{link.Title}</h5>
                  <p className="card-text">{link.Desc.halfDesc}</p>
                  <p className="card-text">
                    <small className="text-muted">{link.date}</small>
                  </p>
                  <button type="button" className="btn btn-dark float-right">
                    Read More
                  </button>
                </div>
              </div>
            </div>
            <FullDescription />
          </div>
        ))}
      </div>
    );
  }
}

const FullDescription = (props) => (
  <div className="modalbox">
    <p>fsdf</p>
  </div>
);

export default App;

Navigation.Js Everything is working fine only App home page content show which i don't want when i click other pages

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
  render() {
    return (
      <Router>
        <ul className="nav justify-content-center mb-4 navigation">
          <li className="nav-item">
            <Link className="nav-link" to="/Api">
              Api
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/News">
              News
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/Website">
              Website
            </Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/Api" component={Api}></Route>
          <Route exact path="/News" component={News}></Route>
          <Route exact path="/Website" component={Website}></Route>
        </Switch>
      </Router>
    );
  }
}
export default Navigation;

Answer 1

For this to work you need to put content of app.js inside another component because right now it doesnt have a route to hide itself when going to other page. So you need to treat the component just like your rest components (Api.js, News.js) etc..

NewAppComponent.js

    import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navigation extends Component {
    render() {
        return (
            <ul className="nav justify-content-center mb-4 navigation">
                <li className="nav-item">
                    <Link className="nav-link" to="/Api">
                        Api
                    </Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/News">
                        News
                    </Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Website">
                        Website
                    </Link>
                </li>
            </ul>
        );
    }
}
export default Navigation;

App.js

import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
    render() {
        return (
            <div className="container">
                <Router>
                    <Navigation />

                    <Switch>
                        <Route exact path="/" component={NewAppComponent}></Route>
                        <Route path="/Api" component={Api}></Route>
                        <Route path="/News" component={News}></Route>
                        <Route path="/Website" component={Website}></Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}


export default App;

NewAppComponent.js

// NewAppComponent.js

import React, { Component } from "react";
import data from "./data";

class NewAppComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            // data: false
        };
    }

    render() {
        return (
            <div className="container">
                {data.map((link) => (
                    <div className="card mb-3" key={link.Title}>
                        <div className="row no-gutters">
                            <div className="col-md-5">
                                <img src={require("./images/" + link.Img)} className="card-img" alt="" />
                            </div>
                            <div className="col-md-7">
                                <div className="card-body">
                                    <h5 className="card-title">{link.Title}</h5>
                                    <p className="card-text">{link.Desc.halfDesc}</p>
                                    <p className="card-text">
                                        <small className="text-muted">{link.date}</small>
                                    </p>
                                    <button type="button" className="btn btn-dark float-right">
                                        Read More
                                    </button>
                                </div>
                            </div>
                        </div>
                        <FullDescription />
                    </div>
                ))}
            </div>
        );
    }
}

const FullDescription = (props) => (
    <div className="modalbox">
        <p>fsdf</p>
    </div>
);

export default NewAppComponent;