Следующая страница визуализируется поверх предыдущей в Reactjs. Как отобразить ее отдельно?

Question

Когда я пытаюсь визуализировать следующую страницу с помощью реагирующей маршрутизации, она отображается поверх предыдущей страницы, я хочу после рендеринга отдельную страницу, как в теге HTML, пожалуйста, помогите, ниже приведен мой фрагмент кода.

import React, { Component } from 'react';
import './App.css';
import NextPage from './Components/NextPage';
import NextPages from './Components/NextPages';
import { BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';

class App extends Component{
  state = {
    name:""
  }

  inputOnClick = (event) =>{
    this.setState({name:event.target.value});
  }

  render(){    
    return(
      <div className = "App">
        <Router>
          <Link to = "/NextPage">Click here</Link>
          <br/>
          <Link to = "/NextPages">Click here2</Link>
          <Switch>
          <Route exact path = "/NextPage" render = {(props)=><NextPage Name={this.state.name}/>} />
          <Route exact path = "/NextPages" render = {(props)=><NextPages Name={this.state.name}/>} />
          </Switch>
        </Router>
        <br/>
        <input value = {this.state.name} onChange ={this.inputOnClick}></input>
      </div>
    );
  }
}

export default App;

Answer 1

Вы похожи на это?

Здесь оба компонента независимы друг от друга, потому что компоненты заменяются другими на основе маршрутизации (react-router-dom).

https://codesandbox.io/s/routing-z5fbg

демо Live

Answer 2

Поместите раздел маршрутов в указатель. js и ссылку на раздел в приложении. js, это поможет перейти на следующую страницу