From static pagination to dynamic

Question

Need help with pagination. Right now my app can change page, but if I want send request like /character?page=4 it always throw me /character?page=1 this is not help, coz I use router. I have no idea how to resolve my problem

My app.js

function App() {
    return (
        <>
            <Router>
                <Header />
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/character' component={AllCharacters} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </Router>
        </>
    );
}

CharacterList.jsx

    // API Data
    const url = "https://rickandmortyapi.com/api/character";

    // Fetching Page
    const fetchPage = (page) => {
        // Init loading while page load
        setLoading(true);
        const query = `${url}?page=${page}`;
        fetchData(query);
        setLoading(false);
    };

    // Change pages
    const { push } = useHistory();
    const handleChanger = (event, page) => {
        fetchPage(page);
        push({
            pathname: "/character",
            search: `?page=${page}`,
        });
    };

                <Pagination
                    count={info.pages}
                    showLastButton
                    showFirstButton
                    onChange={handleChanger}
                />

Answer 1

Dynamic Pagination : App.js

function App() {
    return (
        <>
            <Router>
                <Header />
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/character/page=:page' component={DynamicPagination} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </Router>
        </>
    );
}

Dynamic pagination Demo : DynamicPaginaton.js

export default function DynamicPagination() {
      const history = useHistory();
      const [page, setPage] = React.useState(0);
      const [pageCount, setPagcount] = useState(10);
      const handlePageChange = (event, value) => {
        history.push(`/character/page=${value}`)
        setPage(value);
      };
    
      return (
        <div >
          <Typography>page:{page}</Typography>
          <Pagination
            count={pageCount}
            page={page}
            onChange={handlePageChange}
            style={{ marginTop: 20 }}
          />
        </div>
      );
    }