基本上我想做的是创建一个 React 组合项目,其中包含并展示我的所有 React 项目。但我不知道如何根据 url 值渲染项目。
我的意思是,
<Route path='/projects/:projectName' component={Project}></Route>
我想渲染一个基于 :projectName
vakue 的组件。
或者创建一个 Project
组件,仅根据 url 值呈现给定的项目。
这可能吗?我知道我可以使用 match
来获取 :projectName
值,但如何使用它来渲染组件?
最佳答案
方法很少
1.如上所述让项目组件根据match.params决定应该渲染什么
const routes = {
'my-route1': <MyComponent1 />,
'my-route2': <MyComponent2 />
}
const Project = props => {
const { projectName } = props.match.params
return routes[projectName] || <DefaultComponent />
}
- 您可以定义自己的路由组件,这些组件将根据状态决定渲染哪个组件。当您需要创建母版页或模板并且不希望任何依赖于其他组件内的匹配时,这会很有帮助。
const PrivateRoute = ({ component: Component, ...rest }) => {
const func = props => (!!rest.isUserAllowedToNavigate()
? <Component {...props} />
: (
<Redirect to={
{
pathname: '/login',
search: props.location.pathname !== '/' && queryStringComposer({
redirect_from: props.location.pathname || getQueryStringParam('redirect_from')
})
}
}
/>
)
)
return (<Route {...rest} render={func} />)
}
/* Connecting to redux */
const PrivateRouteConnected = connect(mapStateToProps, mapDispatchToProps)(PrivateRoute)
/* Using as normal routes */
<PrivateRouteConnected exact path="/dashboard" component={Dashboard} />
关于javascript - 根据 url 中给出的值,使用 React 路由动态渲染 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57638753/