如果用戶已經登錄，當用戶刷新頁面時重定向到 React js 中的儀表板頁面

Question

在 React JS 中，我有下面的 URL 或路徑。 路徑：“/UserDashboard/UserDonorList/:id” 儀表板頁面路徑：/UserDashboard

當用戶輸入 http://localhost:3000/UserDashboard/UserDonorList/Ugadhi（最后一個參數 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>
    )
}

導出 {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) 

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);

Answer 1

Okie 很酷，你有兩個選項

1. 您可以使用 redux-persist，它負責將數據持久化到本地存儲中，並在頁面刷新期間自動為您補充數據。
2. 另一種方法是，一旦用戶嘗試導航到 /userdashboard/UserDanoList/:id 您可以執行 API 調用來單獨獲取該用戶詳細信息，如果它不在 state..這樣您將始終擁有數據。