Reactjs 我的导航当前呈现页面大约一秒钟，然后返回主页_Reactjs

Reactjs 我的导航当前呈现页面大约一秒钟，然后返回主页

reactjs

Reactjs 我的导航当前呈现页面大约一秒钟，然后返回主页,reactjs,Reactjs,我正在react中编码，我的导航将打开我想要的页面，然后立即返回主页。我似乎不知道自己做错了什么它正在打开新的页面，所以我觉得主页下面的ReactDOM呈现出了所有问题，但我无法判断这是我组织代码的方式还是代码本身的问题 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; class Main extends React.Component { render(){

我正在react中编码，我的导航将打开我想要的页面，然后立即返回主页。我似乎不知道自己做错了什么

它正在打开新的页面，所以我觉得主页下面的ReactDOM呈现出了所有问题，但我无法判断这是我组织代码的方式还是代码本身的问题

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";


 class Main extends React.Component {
    render(){
        return (
         <div> 
        <h1> React Playground </h1>

        <ul className="header">
            <li><a href="" onClick= {function () {
                    ReactDOM.render(<Playground />, document.getElementById('root'));
            }}>Playground</a></li>
            <li><a href="" onClick={function () {
                    ReactDOM.render(<Technology />, document.getElementById('root'));
            }}>Technology</a></li>
            <li><a href="" onClick={function () {
                    ReactDOM.render(<Library />, document.getElementById('root'));
            }}>Library</a></li>
        </ul>
      </div>
        );
    }
 }

 ReactDOM.render(
  <Main />, 
  document.getElementById("root")
  );

//here is the Playground component for the Playground Page

class Playground extends React.Component {
  render() {
      document.title = "My Playground";

    return (
      <div>
        <header>
        <h1> My Playground </h1>
        </header>

        <nav>
        <ul className="header">
            <li><a href="" onClick= {function () {
                    ReactDOM.render(<Playground />, document.getElementById('root'));
            }}>Playground</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Technology />, document.getElementById('root'));
            }}>Technology</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Library />, document.getElementById('root'));
            }}>Library</a></li>

        </ul>
        </nav>

      </div>
    );
  }
}

//here is the Technology component for the Technology Page
class Technology extends React.Component {

  render() {
      document.title = "Fun Technology ";

    return (
      <div> 
        <h1> Fun Technology </h1>

        <ul className="header">
            <li><a href="" onClick= {function () {
                    ReactDOM.render(<Playground />, document.getElementById('root'));
            }}>Playground</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Technology />, document.getElementById('root'));
            }}>Technology</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Library />, document.getElementById('root'));
            }}>Library</a></li>

        </ul>
      </div>
    );
  }
}

//here is the Library component for the Library page

class Library extends React.Component {

  render() {
      document.title = "Personal Library";

    return (
      <div> 
        <h1> Personal Library </h1>

        <ul className="header">
            <li><a href="" onClick= {function () {
                    ReactDOM.render(<Playground />, document.getElementById('root'));
            }}>Playground</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Technology />, document.getElementById('root'));
            }}>Technology</a></li>

            <li><a href="" onClick={function () {
                    ReactDOM.render(<Library />, document.getElementById('root'));
            }}>Library</a></li>
        </ul>
      </div>
    );
  }
}

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
类Main扩展了React.Component{
render（）{
返回(
反应操场





);
}
}
ReactDOM.render(
, 
document.getElementById（“根”）
);
//这里是游乐场页面的游乐场组件
类是React.Component{
render（）{
document.title=“我的游乐场”；
返回(
我的操场





);
}
}
//这是技术页面的技术组件
类技术扩展了React.Component{
render（）{
document.title=“趣味科技”；
返回(
趣味科技





);
}
}
//以下是库页面的库组件
类库扩展了React.Component{
render（）{
document.title=“个人图书馆”；
返回(
个人图书馆





);
}
}

这是完整的

我认为您的第一个问题是使用多个
```
ReactDOM.render
```
s。恐怕这不是预期的用途。你应该用一次

我看到的第二个问题是将导航复制三次。如果将其提取到自己的组件中并称之为

导航

，则只能渲染一次。比如：

function Navigation(props) {
    return (
  <ul className="header">
    <li>
      <a href="#" onClick={() => props.onClick("playground")}>
        Playground
      </a>
    </li>
    <li>
      <a href="#" onClick={() => props.onClick("technology")}>
        Technology
      </a>
    </li>
    <li>
      <a href="#" onClick={() => props.onClick("library")}>
        Library
      </a>
    </li>
  </ul>
)}

功能导航（道具）{
返回(








)}

然后您可以这样使用它：

function Main() {
  const [page, setPage] = useState("playground");
  return (
    <div>
      <Navigation onClick={setPage} />
      {page === "playground" && <Playground />}
      {page === "technology" && <Technology />}
      {page === "library" && <Library />}
    </div>
  );
}

函数Main（）{
const[page，setPage]=useState（“游乐场”）；
返回(
{page===“操场”&&}
{page==“技术”&&}
{page===“库”&&}
);
}

如果不想使用

react router

进行基于路由的组件渲染，则需要引入

state

并根据

状态切换组件。在上面的Main
组件中，我有一个状态可以保存playway
、technology
或库
，并根据当前值呈现相应的组件
这是完整的

我认为您的第一个问题是使用多个ReactDOM.render
s。恐怕这不是预期的用途。你应该用一次
我看到的第二个问题是将导航复制三次。如果将其提取到自己的组件中并称之为导航
，则只能渲染一次。比如：
function Navigation(props) {
    return (
  <ul className="header">
    <li>
      <a href="#" onClick={() => props.onClick("playground")}>
        Playground
      </a>
    </li>
    <li>
      <a href="#" onClick={() => props.onClick("technology")}>
        Technology
      </a>
    </li>
    <li>
      <a href="#" onClick={() => props.onClick("library")}>
        Library
      </a>
    </li>
  </ul>
)}

功能导航（道具）{
返回(








)}


然后您可以这样使用它：
function Main() {
  const [page, setPage] = useState("playground");
  return (
    <div>
      <Navigation onClick={setPage} />
      {page === "playground" && <Playground />}
      {page === "technology" && <Technology />}
      {page === "library" && <Library />}
    </div>
  );
}

函数Main（）{
const[page，setPage]=useState（“游乐场”）；
返回(
{page===“操场”&&}
{page==“技术”&&}
{page===“库”&&}
);
}


如果不想使用react router
进行基于路由的组件渲染，则需要引入state
并根据状态切换组件。在上面的Main
组件中，我有一个状态可以保存playway
、technology
或库
，并根据当前值呈现相应的组件