Javascript 想要使用Reactjs进行更标准的页面导航吗？

我使用Reactjs尝试了一种简洁的页面导航方式。 这是我的密码：

import React, { Component } from "react";

const homepg = "Hi! Welcome to my site.";
const aboutpg = "I am a React Web Developer.";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { PageCon: "" };
    this.homepg = this.homepg.bind(this);
    this.aboutpg = this.aboutpg.bind(this);
  }
  homepg() {
    this.setState({ PageCon: homepg });
  }
  aboutpg() {
    this.setState({ PageCon: aboutpg });
  }
  render() {
    const { PageCon } = this.state;
    return (
      <div className="App">
        <nav>
          <h1 onClick={this.homepg}>Home</h1>
          <h1 onClick={this.aboutpg}>About</h1>
        </nav>
        <p>{PageCon}</p>{" "}
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
const homepg=“嗨！欢迎来到我的网站。”；
const aboutpg=“我是一个reactive Web开发人员。”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={PageCon:：}；
this.homepg=this.homepg.bind（this）；
this.aboutpg=this.aboutpg.bind（this）；
}
homepg（）{
this.setState（{PageCon:homepg}）；
}
关于{
this.setState（{PageCon:aboutpg}）；
}
render（）{
const{PageCon}=this.state；
返回(
家
关于
{PageCon}
{''}
);
}
}
导出默认应用程序；

---

但是我想要一个更标准的方法。你能告诉我你用什么方法吗？谢谢……

您正在寻找的称为路由机制

看一看。它可能是React（网络）最流行的选择

下面是您演示的用例的一个非常基本的示例：

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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

---

您正在寻找的称为路由机制

看一看。它可能是React（网络）最流行的选择

下面是您演示的用例的一个非常基本的示例：

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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
类应用程序扩展组件{
render（）{
返回(


家


关于



);
}
);
常量Home=（）=>(
家
);
const About=（）=>(
关于
);

你看过吗？我如何在App.js中使用它？也许我使用的功能组件让你感到困惑。我刚刚用App-component更新了示例，就像你问题中的一样。这是否回答了你的问题？