从静态分页到动态

Question

在分页方面需要帮助。现在我的应用程序可以更改页面，但如果我想发送像/character?page=4 这样的请求，它总是会抛出我/character?page=1 this is not help，因为我使用路由器。我不知道如何解决我的问题

我的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

动态分页：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>
        </>
    );
}

动态分页演示：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>
      );
    }