Javascript 单击按钮时显示不同的组件

单击按钮时，我只想渲染不同的组件

我没有使用类，而是使用函数式React hook。这不是全部，而是其中的一部分，因此主要问题是使用相同的方法呈现新组件

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;

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route}；
导入“/App.css”；
从“/components/secondpage”导入{Second}；
函数App（）{
常量handleClick=（）=>{
//我尝试就地使用html或返回组件，但什么也没发生
返回；
};
返回(
创建帐户
提交
);
}
//这在second.js中
导出常数秒=（）=>{
返回(
欢迎来到第二页
);
};
//我试着用这个，但没用
ReactDOM.render(
);
导出默认应用程序；

您可以通过路由、参考此链接或更改状态来完成此操作。请参阅此链接：

为什么需要路由器来显示组件您可以设置一个变量，然后在此基础上显示，如果您需要在单击按钮后显示组件。在路由器代码中，默认情况下，路由器是组件。请先检查路由器的概念。 或者，如果您只想使用路由器，那么就可以在链路、本机链路和更多的链路上传递值以显示组件

您可以这样做：

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

import React，{useState}来自“React”；
进口{
BrowserRouter作为路由器，
转换
路线,，
导航链接
}从“反应路由器dom”；
导入“/App.css”；
从“./components/secondpage”导入{Second}；
导出默认值（）=>{
返回(


第二


{
返回(
欢迎来到第二页
);
}}
/>
或
);
};

您可以使用

React 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>

基于类似的想法，请检查以下内容：

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