时间戳

首页 > 解决方案 > React - React 路由器 dom

javascript - React - React 路由器 dom

问题描述

今天我使用 React 和 react-router-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;

而且我想知道如何在“ServerRoute”中获取该项目-：id，是否有可能，如果可以，请问如何？

非常感谢你，多米

标签： javascriptreactjsreact-router-dom

解决方案

根据react-router-dom 文档，“渲染道具功能可以访问与组件渲染道具相同的所有路由道具（匹配、位置和历史记录）。”

这意味着对于组件render方法中的示例Router，您应该可以通过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"/>
        }}/>
    )

推荐阅读