1

当我尝试使用反应路由渲染下一页时，它会在上一页上渲染，我想要一个单独的页面在渲染后作为 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;
4

2 回答 2

0

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

于 2020-01-07T06:37:56.550 回答
0

你是这样的吗？

这里两个组件是相互独立的，因为组件基于路由（react-router-dom）替换为其他组件。

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

演示现场

于 2020-01-07T06:49:46.533 回答