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

如何解决反应中的分页不起作用加载后向 URL 字符串添加额外内容

嗨，希望有人能帮助我。我已将分页添加到我的 React 应用程序中。我已经检查过并且查询字符串正在正常工作，因为它们应该在后端。但是，当我尝试单击分页按钮时，它会向 URL 添加额外的内容，因此它不是 localhost:3000/topic/page/1，而是 localhost:3000/topic/page/topic/page/1。因此，当我点击链接时，我收到了一个 not found 错误。

路由文件

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)

提前致谢

解决方法

意识到我在路线开始时缺少一个 / 。愚蠢的错误。