Question

基本上，我想做的是创建一个包含我的所有React项目并展示其反应项目的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 />
}

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

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

根据url

2 个答案: