Reactjs 如果用户已登录，则在用户刷新页面时重定向到React js中的仪表板页面

在React JS中，我有以下URL或路径。 路径：“/UserDashboard/UserDonorList/：id” dahboard页面路径：/UserDashboard

当用户输入http://localhost:3000/UserDashboard/UserDonorList/Ugadhi （最后一个parm Ugadhi是/：id），它应该重定向到http://localhost:3000/userdashboard.

对于以上内容，我添加了以下逻辑

const userToken = Cookies.get('user_token')
if(userToken) {
  history.push('/userdashboard')
} else {
  history.push('/')
}

AppRouter.js

import React, { useEffect } from 'react'
import {Router, Route , Switch} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import Cookies from 'js-cookie'
import { HomePage } from '../components/HomePage'
import DashboardPage from '../components/DashboardPage'
import ProfileEditPage from '../components/merch_components/ProfileEditPage'
import CreateUser from '../components/merch_components/CreateUser'
import CreateEvent from '../components/merch_components/CreateEvent'
import UserDashboard from '../components/user_components/UserDashboard'
import UserProfielEdit from '../components/user_components/UserProfileEdit'
import UserDonationReceipt from '../components/user_components/UserDonationReceipt'
import UserDonorList from '../components/user_components/UserDonorList'
import DonorDetailList from '../components/merch_components/DonorDetailList'
import DonorUserDetailList from '../components/merch_components/DonorUserDetailList'

export const history = createHistory()

const AppRouter = () => {

useEffect(() => {
    const token = Cookies.get('auth_token')
    
    if (!token) {
        const userToken = Cookies.get('user_token')
        if(userToken) {
            history.push('/userdashboard')
        } else {
            history.push('/')
        }
    } else if (history.location.pathname === '/'){
        history.push('/dashboard')
    }
}, []);

return (
    <Router history={history}>
        <>
            <Switch>
                <Route path={["/","/merch/login","/merch/signup","/user/login","/user/signup"]} component={HomePage} exact={true}/>
                <Route path="/dashboard" component={DashboardPage} />
                <Route path="/profileedit" component={ProfileEditPage} />
                <Route path="/createuser" component={CreateUser} />
                <Route path="/createevent" component={CreateEvent} />
                <Route path="/userdashboard" component={UserDashboard} exact />
                <Route path="/Userprofileedit" component={UserProfielEdit} /> 
                <Route path="/userdonorreceipt" component={UserDonationReceipt} />
                <Route path="/userdashboard/UserDonorList/:id" component={UserDonorList} exact/>
                <Route path="/MrchDonorList/:id" component={DonorDetailList} />
                <Route path="/MrchUserDonorList/:id" component={DonorUserDetailList} />
            </Switch>
        </>
    </Router>
    )
}

import React，{useffect}来自“React”
从“react Router dom”导入{Router，Route，Switch}
从“历史记录/createBrowserHistory”导入createHistory
从“js cookie”导入cookie
从“../components/HomePage”导入{HomePage}
从“../components/DashboardPage”导入DashboardPage
从“../components/merch_components/ProfileEditPage”导入ProfileEditPage
从“../components/merch_components/CreateUser”导入CreateUser
从“../components/merch_components/CreateEvent”导入CreateEvent
从“../components/user\u components/UserDashboard”导入UserDashboard
从“../components/user\u components/UserProfileEdit”导入UserProfileEdit
从“../components/user\u components/UserDonationReceipt”导入UserDonationReceipt
从“../components/user\u components/UserDonorList”导入UserDonorList
从“../components/merch_components/DonorDetailList”导入DonorDetailList
从“../components/merch_components/DonorUserDetailList”导入DonorUserDetailList
export const history=createHistory（）
常量批准器=（）=>{
useffect（（）=>{
const token=Cookies.get（'auth_token'））
如果（！令牌）{
const userToken=Cookies.get（'user\u token'）
if（userToken）{
history.push（“/userdashboard”）
}否则{
history.push（“/”）
}
}else if（history.location.pathname==='/'））{
history.push（“/dashboard”）
}
}, []);
返回(
)
}

导出{AppRouter作为默认值}

当我在第页时http://localhost:3000/UserDashboard/UserDonorList/Ugadhi，并点击刷新页面，我得到以下错误。我希望它应该重定向到http://localhost:3000/userdashboard.

SummaryTable.js

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom'
import { Table } from 'react-bootstrap'
import { connect } from 'react-redux'
import moment from 'moment'
import { userDonorFilterList } from '../../actions/userDonationDetails'

const SummaryTable = (props) => {

    const [donationsSummary, setDonationSummary] = useState([])
    const [donationsList, setDonationList] = useState([])

    useEffect(() => {
            (async () => {
                const totalDonations = await axios.get(
                    "http://localhost:3000/api/userdashboard"
                );
                totalDonations.data.map(item => {
                    const donationDate = item.donationDate.substring(0,10)
                    item.donationDate = moment(donationDate,'YYYY-MM-DD').format('DD MMM YYYY')
                    return item
                })
                
                setDonationList(donationList => [...donationList, ...totalDonations.data])
                const donationsList = totalDonations.data
                var holder = {}
                donationsList.forEach(function(d) {
                if (holder.hasOwnProperty(d.assignEvent)) {
                    holder[d.assignEvent] = holder[d.assignEvent] + d.donAmount;
                } else {
                    holder[d.assignEvent] = d.donAmount;
                }
                });
                var obj2 = [];
                for (var prop in holder) {
                    obj2.push({ assignEvent: prop, donAmount: holder[prop] });
                    } 
                setDonationSummary((donationsSummary) => [...donationsSummary, ...obj2])
            })();
      }, []);

      const onClickStoreEventList = (selectedEvent) => {
          
          const donationDetailList = donationsList.filter((list) => {
                                        return list.assignEvent === selectedEvent
                                    })
          props.userDonorFilterList(donationDetailList)
      }

    return (
        <>
            <h3 className='pageTitle'>Donataion Summary</h3>
            <Table striped bordered hover size="sm" className='summary_table'>
                <thead>
                    <tr>
                        <th>Event Name</th>
                        <th>Total Amount</th>
                    </tr>
                </thead>
                <tbody>
                    {donationsSummary.length ?
                        donationsSummary.map(item => (
                            <tr key = {donationsSummary.assignEvent}>
                                <Link to={`/userdashboard/UserDonorList/${item.assignEvent}`}>
                                    <td onClick={() => onClickStoreEventList(item.assignEvent)}>{item.assignEvent}</td>
                                </Link>
                                <td>{item.donAmount}</td>
                            </tr>
                        )) :
                            <tr>
                                <td>No Donations</td>
                            </tr>
                    }
                </tbody>
            </Table>
        </>
    )
}

const mapDispatchToProps = (dispatch) => ({
    userDonorFilterList: (donationDetailList) => dispatch(userDonorFilterList(donationDetailList))
 })

 export default connect(undefined, mapDispatchToProps)(SummaryTable) 

import React，{useState，useffect}来自“React”
从“axios”导入axios
从“react router dom”导入{Link}
从“react bootstrap”导入{Table}
从“react redux”导入{connect}
从“时刻”导入时刻
从“../../actions/userDonationDetails”导入{userDonorFilterList}
常量汇总表=（道具）=>{
常量[donationsSummary，setDonationSummary]=useState（[]）
常量[donationsList，setDonationList]=useState（[]
useffect（（）=>{
（异步（）=>{
const totalinvestments=等待axios.get(
"http://localhost:3000/api/userdashboard"
);
total.data.map（项=>{
const donationDate=item.donationDate.substring（0,10）
item.donationDate=时刻（donationDate，'yyyyy-MM-DD'）。格式（'DD-MMM-YYYY'））
退货项目
})
setDonationList（donationList=>[…donationList，…TotalProvisions.data]）
const donationsList=totaladivations.data
var holder={}
捐赠列表forEach（函数（d）{
if（持有人拥有自己的财产（d.转让事件））{
持有人[d.assignEvent]=持有人[d.assignEvent]+d.donAmount；
}否则{
持有人[d.assignEvent]=d.donAmount；
}
});
var obj2=[]；
用于（支架中的var支柱）{
obj2.push（{assignEvent:prop，donAmount:holder[prop]}）；
} 
setDonationSummary（（donationsSummary）=>[…donationsSummary，…obj2]）
})();
}, []);
const onClickStoreEventList=（selectedEvent）=>{
const donationDetailList=donationsList.filter（（列表）=>{
return list.assignEvent==selectedEvent
})
props.userDonorFilterList（捐赠详细信息列表）
}
返回(
多纳泰恩总结
事件名称
总金额
{donationsSummary.length？
donationsSummary.map（项=>(
onClickStoreEventList（item.assignEvent）}>{item.assignEvent}
{item.donAmount}
)) :
没有捐款
}
)
}
const mapDispatchToProps=（调度）=>({
userDonorFilterList：（donationDetailList）=>dispatch（userDonorFilterList（donationDetailList））
})
导出默认连接（未定义，mapDispatchToProps）（汇总表）

UserDonorList.js

import React from 'react'
import {connect} from 'react-redux'
import { Table } from 'react-bootstrap'
import UserDashboardNavBar from './UserDashboardNavBar'

const UserDonarList = (props) => {

    const userHolder = props.donationDetailList
    
    var output = Object.values(userHolder.reduce((acc, curr) => {
            if (acc[curr.assignEvent]) acc[curr.assignEvent].donAmount += curr.donAmount;
            else acc[curr.assignEvent] = { ...curr };
            return acc;
           }, {}));
    var totalAmount = output.map(totalAmount => {
        return totalAmount.donAmount
    })

return (
    <>  
        <UserDashboardNavBar />
        <h3 className='pageTitle'>Donataion Details</h3>
        <Table responsive bordered size="sm" className='summary_table'>
            <thead>
                <tr>
                    <th>Event Name</th>
                    <th>donor Name</th>
                    <th>donor Amount</th>
                    <th>donor Phone</th>
                    <th>donation Date</th>
                </tr>
            </thead>
            <tbody>
                    {props.donationDetailList.map(item => (
                        <tr key = {props.donationDetailList.donorName}>
                            <td>{item.assignEvent}</td>
                            <td>{item.donorName}</td>
                            <td>{item.donAmount}</td>
                            <td>{item.donPhone}</td>
                            <td>{item.donationDate}</td>
                        </tr>
                    ))}
            </tbody>
            <thead>
                <tr>
                    <th></th>
                    <th>Total =</th>
                    <th>{totalAmount}</th>
                </tr>
            </thead>
        </Table>
    </>
    )
}
const mapStateToProps = (state) => ({
    donationDetailList: state.userDondetails.donationDetailList
})

export default connect(mapStateToProps) (UserDonarList);

从“React”导入React
从“react redux”导入{connect}
从“react bootstrap”导入{Table}
从“./UserDashboardNavBar”导入UserDashboardNavBar
const UserDonarList=（道具）=>{
const userHolder=props.donationDetailList
变量输出=对象值（userHolder.reduce（（acc，curr）=>{
if（acc[curr.assignEvent]）acc[curr.assignEvent].donAmount+=curr.donAmount；
else acc[curr.assignEvent]={…curr}；
返回acc；
}, {}));
var至