Показывать другой компонент при нажатии кнопки

Question

Я просто хочу визуализировать различные компоненты, когда я нажимаю кнопку .

Я не использую класс, скорее использую функционал React Hooks . Это не целая вещь, но часть этого, поэтому главная проблема - рендеринг новых компонентов с использованием того же подхода.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import { Second } from "./components/secondpage";

function App() {
  const handleClick = () => {
    // I tried using html in place or returning component but nothing happpened
    return <Second />;
  };

  return (
    <div className="App">
      <div>
        <h1>Create Account</h1>
        <button onClick={handleClick}>Submit</button>
      </div>
    </div>
  );
}

//this is in second.js
export const Second = () => {
  return (
    <div>
      <h1>welcome to second page</h1>
    </div>
  );
};

// I tried using this but nothing worked
ReactDOM.render(
  <Router>
    <Route path="/" component={Second} />
  </Router>
);

export default App;

Answer 1

Зачем вам нужен роутер для показа компонента, вы можете установить переменную и затем показать на основе этого, если вам нужно показать компонент после нажатия кнопки. а в коде роутера по умолчанию роутер является компонентом. Пожалуйста, сначала проверьте концепцию маршрутизатора. Или, если вы хотите использовать маршрутизатор только для ссылки, родной ссылки и многих других, вы можете передать значение, чтобы показать компоненты.

Вы можете сделать это примерно так:

    import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from 'react-router-dom';

import './App.css';
import { Second } from './components/secondpage';

export default () => {
  return (
    <Router>
      <nav className="navbar  ">
        <div className=" navbar-collapse"  >
          <ul className="navbar-nav">
            <li className="nav-item">
              <NavLink to="/second">second</NavLink>
            </li>
          </ul>
        </div>
      </nav>

      <Switch>
        <Route
          path="/second"
          exact
          render={() => {
            return (
              <div>
                <h1>welcome to second page</h1>
              </div>
            );
          }}
        />
        or
        <Route path="/second" component={Second} />
      </Switch>
    </Router>
  );
};

Answer 2

Вы можете использовать React Router или Conditional Rendering для вызова различных компонентов по нажатию кнопки.

Вот пример использования router, сначала обязательно установите react-router-dom и импортируйте необходимые компоненты:

import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";

и внутри метода возврата, используйте это:

 <Router>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/users">Users</Link></li>
              </ul>
            </nav>

            <Switch>
              <Route path="/about"> <About /> </Route>
              <Route path="/users"> <Users /> </Route>
              <Route path="/"> <Home /> </Route>
            </Switch>
          </div>
    </Router>

Используя Conditional Rendering и используя states:

1. Первоначально установите состояние в false (скажем, isTrue - наша переменная)
2. при нажатии кнопки -> внутри метода, который вы вызовете (здесь это будет handleClick), установите состояние в true.

Теперь в методе возврата:

<div>
    {
     this.state.isTrue ?
     <div> <YourComponent /> </div>:
      <div>  
        <h1>Create Account</h1>
        <button onClick={handleClick}>Submit</button>
      </div>
    }
</div>

По аналогичной мысли, проверьте эти:

https://reacttraining.com/react-router/web/guides/quick-start

https://reactjs.org/docs/hooks-state.html

https://reactjs.org/docs/conditional-rendering.html

Answer 3

Вы можете сделать это с помощью маршрутизации, перейдите по этой ссылке: https://codeburst.io/getting-started-with-react-router-5c978f70df91 или изменив состояние. см. эту ссылку: как переместить один компонент в другой компонент при нажатии кнопки в реакции?