根据 url 中给出的值，使用 react 路由动态渲染 react 组件

Question

基本上我想做的是创建一个包含并展示我所有 react 项目的反应组合项目。但是我不知道如何根据 url 值渲染项目。

我的意思是，

<Route path='/projects/:projectName' component={Project}></Route>

我想根据:projectName的 vakue 渲染一个组件。 或者可以创建一个Project组件，该组件仅根据 url 值呈现给定的项目。 这可能吗？我知道我可以使用match来获取:projectName值，但是如何使用它来渲染组件？

Answer 1

方法很少
1.如上所述，让项目组件决定应该根据match.params渲染什么

const routes = {
'my-route1': <MyComponent1 />,
'my-route2': <MyComponent2 />
}
const Project = props => {
const { projectName } = props.match.params
return routes[projectName] || <DefaultComponent />
}

2. 您可以定义自己的路由组件，这些组件将根据状态决定要渲染的组件。当您需要创建母版页或模板并且不希望其他组件内部的匹配有任何依赖项时，它非常有用。

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} />

Answer 2

Project组件可以处理基于 URL 参数呈现不同组件的逻辑。 例如：

const Project = props => {
const { projectName } = props.match.params
if (projectName === project1) {
return <ProjectOne addProps={addProps} />
}
if (projectName === project2) {
return <ProjectTwo />
}
return <DefaultProject />
}