从静态分页到动态分页

Question

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

Myapp.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>
);
}