[英]React - React router dom
今天我使用 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,是否有可能,如果可以,请问如何?
非常感谢你,多米
根据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"/>
}}/>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.