如何使用 React Router 替换 render 方法中的组件？答案

【问题标题】：How to use React Router to replace a Component in render method?如何使用 React Router 替换 render 方法中的组件？
【发布时间】：2019-10-29 18:12:31
【问题描述】：

点击“Los geht's”后，我想使用 React-Router 将 <Frontpage /> 组件更改为 <Question /> 组件。

请忽略 handleClick 方法，这是我第一次尝试没有 react-router。

import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: false,
    }
    this.handeClick = this.handleClick.bind(this)
  }

  handleClick = () => {
    this.setState({
      showComponent: true })
    // console.log("The button was clicked!")
    // document.getElementById('page')
    // document.getElementsByClassName('App-Header')
  }    


  render() {
    return (
      <Router>
        <div className="App">
          <Frontpage />
            <Link to={'/Question'} className="nav-link"> Los geht's </Link>
          <Switch>
            <Route path='/Question' component={Question} />
          </Switch>
        </div>
      </Router>        
    );
  }
}


export default App;

我得到的只是“欢迎页面”下的一个新组件，但它需要在新页面中呈现整个页面并显示“第二页”。

【问题讨论】：

以什么方式改变什么组件？目前尚不清楚您要做什么（至少对我而言）。
抱歉问题不清楚。点击“Los geht's”后，我想用组件更改组件
在这种情况下，@Jeggettx 给出了遵循最佳实践的最简洁的答案。

标签： javascript reactjs react-router-v4 react-router-dom

【解决方案1】：

你可以这样实现：

render() {
    const SelectedComponent = someCondition ? Question : OtherComponent;
    return (
      <Router>
        <div className="App">
          <Frontpage />
            <Link to={'/Question'} className="nav-link"> Los geht's </Link>
          <Switch>
            <Route path='/Question' component={SelectedComponent} />
          </Switch>
        </div>
      </Router>        
    );
  }

【讨论】：

【解决方案2】：

只有当路由与/ 完全匹配时，您才能显示<Frontpage />，如下所示：

render() {
    return (
      <Router>
        <div className="App">
          
          <Switch>
            <Route path='/' exact >
              <Frontpage />
              <Link to={'/Question'} className="nav-link"> Los geht's </Link>
            </Route>
            <Route path='/Question' component={Question} />
          </Switch>
        </div>
      </Router>        
    );

【讨论】：

那是我想看的！非常感谢！！

【解决方案3】：

现在重新构建我的答案，因为期望的结果更加清晰。这应该可以满足您的需求。

render() {
return (
  <Router>
    <div className="App">
        <Link to="/">Frontpage</Link>
        <Link to="/Question">Question</Link>
                <Switch>
                    <Route path="/" exact component={Frontpage} />
                    <Route path="/Question" exact component={Question} />
                </Switch>
            </div>
        </Router>
      );
    }

【讨论】：