Question

当我尝试使用React路由渲染下一页时，它正在上一页上渲染，我希望渲染后要像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

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

Answer 2

你看起来像这样吗？

这两个组件彼此独立，因为组件会根据路由（react-router-dom）相互替换。

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

演示Live

下一页将比Reactjs中的上一页呈现，如何单独呈现？

2 个答案: