javascript - 根据 url 中给出的值,使用 React 路由动态渲染 React 组件

标签 javascript reactjs react-router

基本上我想做的是创建一个 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/

    相关文章:

    javascript - momentJS-timezone 始终显示 UTC 时间

    javascript - Redux 表单 : MapStateToProps is breaking form

    html - 我怎样才能在一个页面上获得多个 div?

    javascript - 如何在 React.JS 中有条件地添加路由?

    reactjs - 在react-router中保留查询参数

    javascript - ReactJS - 使用 .setState 更改嵌套值

    javascript - fs.link 和 fs.symlink 有什么区别?它们是平台独立的吗?

    javascript - 在点击 td 时,点击文本框

    reactjs - 浏览器历史记录需要 DOM - React 服务器端渲染

    javascript - 重定向 react 路由器中的所有路由