Как использовать React Router для замены компонента в методе рендеринга?

Question

Я хочу использовать React-Router, чтобы изменить компонент <Frontpage /> на компонент <Question /> после нажатия кнопки "Los geht's".

Пожалуйста, игнорируйте метод handleClick, это была одна из моих первых попыток без реакции-маршрутизатора.

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;

Все, что я получаю, это новый Компонент под моей "страницей приветствия", но он должен отобразить всю страницу в новом виде и показать "вторую страницу".

javascript reactjs react-router-v4 react-router-dom

2

minternational 29 Окт 2019 в 21:12

Answer 1

Вы можете показать <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>        
    );

2

Jeggettx 29 Окт 2019 в 18:22

Answer 2

Вы можете достичь этого следующим образом:

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>        
    );
  }

3

Clarity 29 Окт 2019 в 18:20

Answer 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>
      );
    }

1

Jschriemer 29 Окт 2019 в 18:36

Как использовать React Router для замены компонента в методе рендеринга?

3 ответа

Похожие вопросы

Новые вопросы

javascript