Javascript React-React路由器dom

今天我和React以及React路由器dom一起工作。我想使用我自己的类创建我自己的“路由”，但在呈现页面之前，我不知道如何获取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;

从“React”导入React
从“react router dom”导入{Route，Redirect}
从“./contexts/AuthContext”导入{useAuth}
导出默认函数ServerRoute（{component:component，…rest}）{
const{currentUser}=useAuth（）；
返回(
{
返回currentUser？/*执行任务*/：
}}/>
)
}

我的索引如下：

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;

从'react Router dom'导入{BrowserRouter as Router，Switch，Route}；
从“../context/AuthContext”导入{AuthProvider}；
从“/ServerRoute”导入ServerRoute；
常数路由器=（）=>{
返回(
)
}
导出默认路由器；

我想知道我是如何得到“ServerRoute”中的项目的：id，是否有可能，如果有，请怎么做

非常感谢您，Domi

根据“渲染道具功能可以访问与组件渲染道具相同的所有路由道具（匹配、位置和历史）。”

这意味着对于

路由器

组件的

渲染

方法中的示例，您应该可以通过

props.match.params

访问参数

对于您的情况：

//上述代码的其余部分
返回(
{
const id=props.match.params.id//获取当前路由id
返回currentUser？/*执行任务*/：
}}/>
)