如何通過單擊 React 中的按鈕來路由 class 組件？

Question

我是 React 的新手。 我正在嘗試構建一個頁面並在主頁上有 3 個button或img 。 當我單擊其中一個時，我將被路由到另一個 class 組件。 您可以將其視為單擊圖標並將您路由到另一個類別頁面（只是一個示例）。 以下是我嘗試過的結構和部分代碼。 我不知道如何實現這一點，我用谷歌搜索，似乎找不到我想要的東西。

結構：

/src
  .index.js
  .App.js
  .BookStore.js
  .FruitStore.js
  .FoodStore.js

index.js

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(
    <App />, 
    document.getElementById('root')
);

應用程序.js：

import React from "react";
import BookStore from "./BookStore";

const AppContainer = () => {
    return (
        //do the routing 
        <BookStore/>
    )
};

export default AppContainer;

書店.js

export default class BookStore extends React.Component {
}
const contentDiv = document.getElementById("root");
const gridProps = window.gridProps || {};
ReactDOM.render(React.createElement(BookStore , gridProps), contentDiv);

Answer 1

首先，您可以查看/one react 路由器，例如https://reactrouter.com/web/guides/quick-start

但是，由於您正在編寫您的新反應，這可能有點太多了......

首先，我想知道為什么您在 indexjs 中使用“ReactDOM”（這似乎是正確的），但也在 BookStore.js 中。 我還建議將您的組件編寫為函數，例如您的“AppContainer”，並且不再使用 class 組件（或者您真的需要這樣做嗎？-為什么？）。 您可以使用鈎子代替，例如 state 在組件中。

然后，您需要在用於路由的 AppContainer 中使用任何類型的 state。 也許是這樣的：

const AppContainer = () => {
    const [showDetail, setShowDetail] = useState();
    return <>
        {!showDetail && <BookStore onDetail={detail => setShowDetail(detail)} />}
        {showDetail && <DetailPage detail={showDetail} onBack={() => setShowDetail(undefined)}}
    </>
}

然后，您的 AppContainer 有一個 state 是否顯示書店（當“showDetail”為假時顯示，或者當 showDetail 為真時顯示 DetailPage。

為此，您的 Bookstore 需要提供回調以讓 AppContainer 知道應該更改某些內容。 很簡單，它可能看起來像這樣：

const BookStore = ({onDetail}) => {
    return <button onClick={() => onDetail("anything")}>Click me</button>
}

現在當有人點擊書店上的按鈕時，它會調用“onDetail”回調，該回調是在AppContainer中設置的，用於設置“showDetail”state。 所以在這種情況下，這個將被更新為“任何東西”。 這將導致 AppContainer 上的重新渲染，現在將渲染一個 DetailPage 組件。