如何通过单击 React 中的按钮来路由 class 组件？

Question

I am new to React. I am trying to build a page and having like 3 button or img on main page. When I click either one, I shall be routed to another class component. You can treat it like click the icon and route you to another category page (just an example). Below is my structure and partial code I tried. I have no idea how to achieve that, and I googled and seems cannot find the stuff I want.

Structure:

/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')
);

App.js:

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

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

export default AppContainer;

BookStore.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

First, you could have a look at the/one react router, eg https://reactrouter.com/web/guides/quick-start

However, since you're writing you're new to react, this might be a little too much...

First, I was wondering why you're using the "ReactDOM" in your indexjs (that seems to be correct), but also in the BookStore.js. I would also recommend to write your components as functions, like your "AppContainer" and not use the class components anymore (or do you really need to do that? - why?). You can use hooks instead to have eg state in the components.

You would then need any kind of state in your AppContainer which is used for the routing. Maybe like this:

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

Your AppContainer then has a state wheter or not to show the Bookstore (which is shown when "showDetail" is falsy, or a DetailPage which is shown when showDetail is truthy.

For this to work, your Bookstore needs to provide callbacks to let the AppContainer know that something should change. Very simply it could look like this:

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

Now when someone clicks the button on the bookstore, it calls the "onDetail" callback, which was set in the AppContainer to set the "showDetail" state. So this one will be updated to "anything" in this case. This will result in a rerender on the AppContainer which will now render a DetailPage component instead.