本文从属于笔者的React入门与最佳实践系列 ,是对于React Router最新指南与异步加载实践的补充

NamedComponent

在正常的Route项配置中，在component这个Prop中我们传入的是某个组件名，而如果我们需要在路由配置时动态构造一些组件，譬如我们希望传入标题为HelloWorld的Message组件时，我们会需要以下配置:

const TitledMessage = ()=>{ }

这里是传入了一个函数式声明的组件，关于函数式声明的组件可以参考React中函数式声明组件。。而React Router官方也提供了我们另一种动态构造组件的方式，即是所谓的NamedComponent，即允许在子路由声明时将Props值作为路由配置参数传入父路由，譬如我们创建了需要传入两个Props参数的组件:

const NamedComponents = (props) => (    {props.title}[br]    {props.subTitle})

而NamedComponent需要的两个输入参数其实也是两个可组合的组件:

const Title = () => (  # Hello from Title Component)const SubTitle = () => (  # Hello from SubTitle Component)

然后我们可以为NamedComponent组件创建一个单独的路由，而其默认子路由可以是两个组件:

最后的效果如下所示:

而在需要读取该参数的组件中:

const About = (props) => (

### Welcome to the About Page## {props.params.name}

)

有时候，我们也需要设置可选参数，譬如如果按照上面的配置方案我们直接访问/# /about是无法访问到About组件的，有点类似于正则表达式的写法:

另有一个小Trick，有时候我们在组件内部展示元素的时候是需要根据是否有参数传入然后再判断是否需要显示:

{ props.params.name && ## Hello, {props.params.name}}

## Query String Parameters:查询参数上文介绍的是按照路由参数的方式进行参数传递，就像HTTP URL标准一样，有时候我们也需要按照查询参数的方式来进行参数传递，譬如我们定义了如下基于查询参数的组件:

const Query = (props) => (

{props.location.query.message}

)

然后我们需要在刚才构建好的路由地址中添加上该组件:

...

...

而对应的带参数传递的跳转到该组件的Link为:

Route Query

最后，我们在官方的总的例子中来看下两种参数的使用：

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link } from 'react-router'
import withExampleBasename from '../withExampleBasename'
const User = ({ params: { userID }, location: { query } }) => {
let age = query && query.showAge ? '33' : ''
return (

  # User id: {userID}      {age}    

)
}
const App = ({ children }) => (

  1. Bob      1. Bob With Query Params      1. Sally    {children}    

)
render((

), document.getElementById('example'))

#组件、参数、const、props#

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！