React - React 路由器 dom

Question

今天我使用 React 和 react-router-dom。 我想使用自己的 class 創建自己的“路線”，但在呈現頁面之前我不知道如何獲取 id。

我的代碼如下：

import React from "react"
import { Route, Redirect } from "react-router-dom"
import { useAuth } from "../contexts/AuthContext"

export default function ServerRoute({ component: Component, ...rest }) {

    const { currentUser } = useAuth();

    return(
        <Route {...rest} render={props => {
            return currentUser ? /* Do stuff */ <Component {...props}/> : <Redirect to="/auth/login"/>
        }}/>
    )

}

我的索引如下：

import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import { AuthProvider } from '../contexts/AuthContext';
import ServerRoute from './ServerRoute';

const TruRouter = () => {

    return(
        <AuthProvider>
            <Router>
                <Switch>
                    <ServerRoute path="/server/:id" component={Component}/>
                </Switch>
            </Router>
        </AuthProvider>
    )

}

export default TruRouter;

而且我想知道如何在“ServerRoute”中獲得該項目-：id，是否有可能，如果可以，請問如何？

非常感謝你，多米

Answer 1

根據react-router-dom 文檔，“渲染道具 function 可以訪問與組件渲染道具相同的所有路由道具（匹配、位置和歷史記錄）。”

這意味着對於您在Router組件的render方法中的示例，您應該可以通過props.match.params訪問參數。

對於您的情況：

// rest of the code above

    return(
        <Route {...rest} render={props => {
            const id = props.match.params.id // get the current route id

            return currentUser ? /* Do stuff */ <Component {...props}/> : <Redirect to="/auth/login"/>
        }}/>
    )