反应中的分页不起作用。 加载后额外添加到 URL 字符串

Question

hi hope someone can help me. I have added pagination into my react app. I have checked and the query strings are working as they should be on the back end. However when I try and click through the pagination buttons it adds extra to the URL so instead of localhost:3000/topic/page/1 it is localhost:3000/topic/page/topic/page/1. Therefore I get a not found error when I click on the link.

Routes file

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Register from '../auth/Register';
import Login from '../auth/Login';
import Alert from '../layout/Alert';
import Dashboard from '../dashboard/Dashboard';
import CreateProfile from '../profile-forms/CreateProfile';
import EditProfile from '../profile-forms/EditProfile';
import Profiles from '../profiles/Profiles';
import Profile from '../profile/Profile';
import Posts from '../posts/Posts';
import Post from '../post/Post';
import Topics from '../topic/Topics';
import Flashcard from '../flashcard/Flashcard';
import Quiz from '../quiz/Quiz';
import Factsheet from '../factsheet/Factsheet';
import NotFound from '../layout/NotFound';
import PrivateRoute from '../routing/PrivateRoute';

const Routes = () => {
  return (
    <section className="container">
      <Alert />
      <Switch>
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <PrivateRoute exact path="/profiles" component={Profiles} />
        <PrivateRoute exact path="/profile/:id" component={Profile} />
        <PrivateRoute exact path="/dashboard" component={Dashboard} />
        <PrivateRoute exact path='/create-profile' component={CreateProfile} />
        <PrivateRoute exact path='/edit-profile' component={EditProfile} />
         <PrivateRoute exact path='/topic' component={Topics} />
        <PrivateRoute exact path='/topic/search/:keyword' component={Topics} />
        <PrivateRoute exact path='/topic/page/:pageNumber' component={Topics} />
        <PrivateRoute exact path='/topic/search/:keyword/page/:pageNumber' component={Topics} />
        <PrivateRoute exact path='/topic/flashcard/:id' component={Flashcard} />
        <PrivateRoute exact path='/topic/quiz/:id' component={Quiz} />
        <PrivateRoute exact path='/topic/factsheet/:id' component={Factsheet} />
        <PrivateRoute exact path="/posts" component={Posts} />
        <PrivateRoute exact path="/posts/:id" component={Post} />
        <Route component={NotFound} />
      </Switch>
    </section>
  );
};

export default Routes;

Paginate.js

import React from 'react'
import { Pagination } from 'react-bootstrap'
import { Link } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap'

const Paginate = ({ pages, page, keyword = '' }) => {
  return (
    pages > 1 && (
      <Pagination>
        {[...Array(pages).keys()].map((x) => (
          <LinkContainer
            tag={Link}
            key={x + 1}
            to={keyword
                  ? `topic/search/${keyword}/page/${x + 1}`
                  : `topic/page/${x + 1}`
            }
          >
            <Pagination.Item active={x + 1 === page}>{x + 1}</Pagination.Item>
          </LinkContainer>
        ))}
      </Pagination>
    )
  )
}

export default Paginate

SearchBox.js

import React, { useState } from 'react'
import { Form, Button } from 'react-bootstrap'


const SearchBox = ({ history }) => {
    const [keyword, setKeyword] = useState('')

    const submitHandler = (e) => {
        e.preventDefault() 
            if(keyword.trim()) {
                history.push(`/topic/search/${keyword}`)
            } else {
                history.push('/topic')
            }
        }
        
    return (
        <Form onSubmit={submitHandler} inline>
            <Form.Control 
                type="text" 
                name="q" 
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="Search Topics....."
            ></Form.Control>
        </Form>

    )
}


export default SearchBox

topic.js

import React, { Fragment, useEffect } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import Paginate from '../layout/Paginate'
import TopicItem from './TopicItem';
import { getTopics } from '../../actions/topic';



const Topics = ({ getTopics, topic: { topics, loading, pages, page }, match }) => {
    const keyword = match.params.keyword
    const pageNumber = match.params.pageNumber || 1

    useEffect(() => {
        getTopics(keyword, pageNumber);
    }, [getTopics, keyword, pageNumber])

    return (
        <Fragment>
            {loading ? (
                <Spinner />
            ) : (
                <Fragment>
                    <h1 className="large text-primary1 my-2">Pick a Topic</h1>
                    <Link to="/topic" className="btn my-4">
                        Back To Topics
                    </Link>
                    <div className="card-grid-home">
                        {topics.length > 0 ? (
                            topics.map(topic => (
                                <TopicItem key={topic._id} topic={topic} />
                            ))
                        ) : (
                            <h4>No topics found......</h4>
                        
                        )}
                    </div>
                    <Paginate pages={pages} page={page} keyword={keyword ? keyword : ''}/>
                </Fragment>
            )}
        </Fragment>
    )

};

Topics.prototype = {
    getTopics: PropTypes.func.isRequired,
    topic: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    topic: state.topic
})

export default connect(mapStateToProps, { getTopics })(Topics)

Thanks in advance

Answer 1

Realised that I was missing a / for the start of the routes. Silly mistake.