反应 - 在多个页面上陈述

Question

我想在React中设置一个投资组合页面，该页面将具有不同的页面（简历，新闻，作品），并且它们将是不同的组件。

尽管如此，我还是让我感到困惑的是，我不能将“ app.js”作为“妈妈组件”执行，因为所有组件都在不同的URL中，并且它们内部至少有一个不同的组件。例如，我的课程组件：

import React from 'react';
import Header from './Header';

class Curriculum extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <article className="curriculum">
          <div className="curriculum-text">
            <ul>
              <li>
                2022
                <ul>
                  <li>Participating in ..........</li>
                  <li>Released my co-authored article "Three Ways of .....</li>
                </ul>
              </li>
              <li>
                2021
                <ul>
                  <li>
                    Starting to work at the ..........
                    <ul>
                      <li>Working on the ......</li>
                      <li>Assisting to ......</li>
                      <li>Reviewing and drafting contracts</li>
                    </ul>
                  </li>
                  <li>Participating IRIS conference with my paper titled "...." ......</li>
                </ul>
              </li>
              <li>
                2020
                <li></li>
              </li>
            </ul>
          </div>
        </article>
      </React.Fragment>
    );
  }
}

export default Curriculum;

我的新闻组成部分：

import React, { Fragment } from 'react';
import Header from './Header';

class News extends React.Component {
  goToNews = (event) => {
    event.preventDefault();
    const currentNews = event.target.parentElement.id;
    this.props.history.push(`/news/${currentNews}`);
    console.log(this.props);
  };

  render() {
    return (
      <React.Fragment>
        <Header />
        <article className="news">
          <div className="news-text">
            <h2>News from the World </h2>
            <div id="news1" value="news1" onClick={this.goToNews}>
              <h3>News1</h3>
            </div>
            <div id="news2" value="news2" onClick={this.goToNews}>
              <h3>News2</h3>
            </div>
            <div id="news3" value="news3" onClick={this.goToNews}>
              <h3>News3</h3>
            </div>
          </div>
        </article>
      </React.Fragment>
    );
  }
}

export default News;

我尝试将我的Router.js转换为应用程序组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Introduction from './Introduction';
import Curriculum from './Curriculum';
import Works from './Works';
import News from './News';
import CurrentNews from './CurrentNews';
import NotFound from './NotFound';

class App extends React.Component {
  yellAtMe = (fish) => {
    console.log('heeeeeeeeeeeeeeeeeee');
  };

  render() {
    return (
      <Router yellAtMe={this.yellAtMe}>
        <Switch yellAtMe={this.yellAtMe}>
          <Route exact path="/" component={Introduction} />
          <Route exact path="/curriculum" component={Curriculum} />
          <Route yellAtMe={this.yellAtMe} exact path="/works" component={Works} />
          <Route exact path="/news" component={News} />
          <Route path="/news/:newsId" component={CurrentNews} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

export default App;

但是我无法通过路由，切换和路由器道具将其转换为组件（至少我至少是我没有成功）。 我的问题是：

• 我可以为每个组件设置更多状态吗？ （这与Wes Boss的建议相抵触，国家应该是“真理的单一来源”）
• 是否有任何方法可以通过路由器组件将道具通过？ （或者您认为我的解决方案将其转换为app.js是否足够）
• 我应该以某种方式将所有组件放入一个大组件中吗？ （因此，以某种方式会这样:) - 但是，如何将它们作为不同的页面与不同URL的不同页面？）

<App />
<Header />
<Always-change-component />
<CV />
<News />
<Works />

预先感谢！

Answer 1

“我是否允许为每个组件建立更多状态？应仅保留与此组件相关和使用的内部信息，以及您应该通过父组件传递的所有通用信息。

“有什么方法可以通过路由器组件将道具通过吗？（或者您认为我的解决方案将其转换为app.js是否足够）” - 您应该将共享信息保留在父组件中，只需重写类似的路线结构

<Router>
    <Switch>
       <Route exact path="/">
         <Introduction yellAtMe={this.yellAtMe}/>
       <Route />     
       ....
    </Switch>
</Router>

：我以某种方式将所有组件都放在一个大组成部分中？ （因此，以某种方式会这样:) - 但是如何将它们作为不同的网页与不同URL的不同页面？） - 答案在上面。