下一页在 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

将路线部分放在索引中.js并链接到app.js中的部分，这将有助于转到下一页

Answer 2

你看起来像这样吗？

在这里，两个组件彼此独立，因为组件基于路由(react-router-dom(替换到其他组件。

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

演示现场