- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的路由器设置是这样的
<Switch>
<PrivatePage key={index} {...opts} component={(props) =>
<Section {...props} pages={childRoutes} />
} />
<PrivatePage path='/accounts/:id' exact={true} render={({ match }) => (
<Redirect to={/accounts/${match.params.id}/profile} />
)} />
...
<Route component={NotFound} />
</Switch>
然后<Section />
<SubNavMenu />
<Route path=/accounts/:id/profile componet={ProfilePage} />
<Route path=/accounts/:id/dashboard componet={DashboardPage} />
然后<PrivatePage />
呈现类似,而 <Page />
只是渲染<Navigation /> {this.props.children}
const PrivatePage = ({ component: Component, ...rest }) => {
let result = props => (
<Redirect
to={{
pathname: '/redirect',
state: { from: props.location },
}}
/>
)
if (User.methods.isAuthed()) {
result = props => (
<Page>
<Component {...props} />
</Page>
)
} else if (rest.path === '/') {
result = props => (
<Redirect
to={{
pathname: '/login',
}}
/>
)
}
return <Route {...rest} render={props => result(props)} />
}
export default PrivatePage
<小时/>
单击一个链接,将我带到 accounts/:id
正确地将我重定向到个人资料页面,但是当我尝试从 SubNavMenu 转到仪表板页面时,我得到了 NotFound 页面并安慰 this.props.match {path: "/", url: "/", params: {…}, isExact: false}
但我的路径是/accounts/7kB7fRdsu39Be44ou/dashboard
感谢您的帮助
<小时/>根据请求,部分的完整代码
pages = [
{
authed: true,
icon: 'cog',
component: (<div/>),
name: 'AccountDetailSection',
path: `/accounts/:id/profile`,
},
{
authed: true,
component: AccountProfilePage,
exact: true,
getLink: id => `/accounts/${id}/profile`,
icon: 'cog',
label: 'Account',
name: 'AccountDetailProfile',
parent: 'AccountDetailSection',
path: `/accounts/:id/profile`,
},
{
authed: true,
component: AccountDashboardsPage,
exact: true,
getLink: id => `/accounts/${id}/dashboard`,
icon: 'cog',
label: 'Dashboard',
name: 'AccountDetailDashboards',
parent: 'AccountDetailSection',
path: `/accounts/:id/dashboard`,
},
]
class PrivateSection extends React.Component<IProps, IState> {
classes = { // static values
button: 'App-navigation--listItemButton',
container: 'App-navigation',
header: 'App-navigation--header',
headerLogo: 'App-navigation--headerLogo',
listContainer: 'App-navigation--list',
listItem: 'App-navigation--listItem',
listItemActive: 'App-subnavigation--listItem--active',
listItemHover: 'App-navigation--listItem--hover',
positionBottom: 'App-navigation--bottom',
positionTop: 'App-navigation--top',
}
sharedProps = { // static values
activeClass: this.classes.listItemActive,
buttonClass: this.classes.button,
buttonContainer: this.classes.listItem,
hoverClass: this.classes.listItemHover,
menuContainer: this.classes.listContainer,
onHover: this.handleMouseIn.bind(this),
}
constructor(props: IProps) {
super(props)
this.state = {
hovering: '',
}
}
handleMouseIn(name: string) {
this.setState({hovering: name})
}
handleMouseOut() {
this.setState({hovering: ''})
}
renderSubNav() {
const navOpts = {
hovering: this.state && this.state.hovering || '',
onHover: this.handleMouseIn.bind(this),
}
const navItems: any = this.props.pages.map(p => { // tslint:disable-line no-any
const o = {...p}
if (typeof(o.getLink) === 'function') {
const {id} = this.props.match && this.props.match.params || {id: ''}
o.link = o.getLink(id)
o.getLink = undefined
}
o.authed = undefined
o.exact = undefined
o.component = undefined
return {...navOpts, ...o}
})
const submenuClasses = {
active: this.sharedProps.activeClass,
button: this.sharedProps.buttonClass,
buttonContainer: this.sharedProps.buttonContainer,
hover: this.sharedProps.hoverClass,
menuContainer: this.sharedProps.menuContainer,
}
return (
<div
className='profile_subnav'
style={{height: '100%'}}
onMouseLeave={() => this.handleMouseOut()}
>
<Menu
items={navItems}
classes={submenuClasses}
/>
</div>
)
}
renderContent() {
return (
<div className='profile_content'>
{this.props.pages.map((opts, index) => {
const o: any = {...opts} // tslint:disable-line no-any
if (typeof(o.getLink) === 'function') {
const {id} = this.props.match && this.props.match.params || {id: ''}
o.link = o.getLink(id)
o.getLink = undefined
}
return (
<PrivateRoute key={index} {...o}/>
)
})}
</div>
)
}
render() {
return (
<div
className='page--content_container'
>
{this.renderSubNav()}
{this.renderContent()}
</div>
)
}
}
export default PrivateSection
<小时/>
<Button />
的渲染方法(由 <Menu />
包裹
render() {
const {
activeClass,
containerClass,
exactLink,
hoverClass,
icon,
label,
link,
onClick,
handleActive,
} = this.props
let message = (
<div className='Button--message'>
<div className='Button--messageText'>{label}</div>
</div>
)
if (icon) {
message = (
<div className='Button--message'>
<div className='Button--messageIcon'><Icon name={icon} / ></div>
<div className='Button--messageText'>{label}</div>
</div>
)
}
const buttonContainerClass = this.isHovering() ? `${containerClass} ${hoverClass}` : containerClass
const ButtonContainer = props => (
<button
{...props}
className={this.props.buttonClass || ''}
onMouseEnter={() => this.handleMouseIn()}
onMouseLeave={() => this.handleMouseOut()}
>
{message}
</button>
)
let Result
if (typeof(link) === 'string') {
if (typeof(activeClass) === 'string' && activeClass.length > 0) {
const opts = {
activeClassName: activeClass || '',
className: buttonContainerClass || '',
exact: exactLink || false,
isActive: handleActive || undefined,
strict: true,
to: link,
}
Result = (
<NavLink {...opts} >
<ButtonContainer />
</NavLink>
)
} else {
Result = (
<Link to={link} className={buttonContainerClass}>
<ButtonContainer />
</Link>
)
}
} else if (typeof(onClick) === 'function') {
Result = (
<div className={buttonContainerClass}>
<ButtonContainer onClick={() => onClick()} />
</div>
)
} else {
console.warn('Button must have an action props> ', {props: this.props})
}
return Result
}
最佳答案
我遇到了类似的问题,Switch 找不到用其他组件包装的路由。查看源代码,看起来 Switch
并没有在子级中递归地查找 Route
,因此它们不能嵌套。
既然如此,要使用 Switch
,您需要重构以使 Route
成为每个路由的顶级组件。或者重构为不使用 Switch
- 基本上使所有路由完全
匹配。
切换来源:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js它使用 React.Children.forEach 来查找路径,该路径仅迭代直接子项,而不是嵌套子项。
关于javascript - 子页面与react-router 4不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46548384/
我有这个 html 代码: HELLO WORLD! X V HELLO WORLD! X V 我想按 X(类关闭)将父 div 的高度更改为 20px 并显示 V(类打开),但在每个 d
在会计应用程序的许多不同实现中,有两种主要的数据库设计方法来保存日志和分类帐数据。 只保留 Journal 信息,然后 Ledger 只是 Journal 的一个 View (因为 journal 总
我想在另一个子里面有一个子, sub a { sub b { } } 我想为每次调用 sub b 创建一个新的 sub a 实例。有没有办法在 Perl 中做到这一点? 当我运行上面的
我有一些代码正在查找重复项并突出显示单元格: Private Sub cmdDups_Click() Dim Rng As Range Dim cel As Range Set Rng = ThisW
可能有一个简单的解决方案,但我很难过。 我有一个包含一个 ID 字段的主表。在两个可能的字段中有一个具有该 ID 的子表。想象一个由选手 A 和选手 B 组成的 double 队。Master 表将有
假设我有一个包含对象的数组: [ { "id": "5a97e047f826a0111b754beb", "name": "Hogwarts", "parentId": "
我正在尝试对 MySQL 数据库表执行一对父/子模型的批量插入,但似乎无法使用标准的 ActiveRecord 功能来完成。所以,我尝试了 activerecord-import gem,但它也不支持
我有一个带有多个子类的父抽象类。最终,我希望通过 GUI 中的进度条显示子类中完成的进度。 我目前所做的,我意识到这是行不通的,是在父类中声明为每个子类将覆盖的虚拟方法的事件方法定义。所以像: pub
是否可以通过键数组在对象中设置变量?例如我有这个对象: var obj = {'outer': {'inner': 'value'} }; 并希望设置由键数组选择的值: var keys = ['ou
我有一个名为 companies 的 MySQL 表,如下所示: +---------+-----------+-----------+ | id_comp | comp_name | id_pare
我正在尝试使用 sublime text 在 sublime text 上的 ionic 上打开我的第一个应用程序。它给了我一个“找不到命令”的错误。如何修复? 我试过这些命令: sudo rm -r
不好意思问,但我正在使用 webapp2,我正在设计一个解决方案,以便更容易定义路由 based on this google webapp2 route function .但这完全取决于能够在子级
我有代表树的数字字符串(我不知道是否有官方名称): 012323301212 上面的例子代表了 2 棵树。根用 0 表示。根的直接子代为“1”,“1”的直接子代为“2”,依此类推。我需要将它们分组到由
是否可以在当前 Activity 之上添加 Activity 。例如,假设我单击一个按钮,然后它将第二个 Activity 添加到当前 Activity 。而第二个 Activity 只覆盖了我当前
我很难思考如何为子资源建模。 以作者的书籍为例。你可以有 N 本书,每本书只有一位作者。 /books GET /books POST /books/id PUT /books/id DELETE 到
有人可以向我解释以下内容(python 2.7) 来自已解析文件的两个字符串数字: '410.9''410.9 '(注意尾随空格) A_LIST = ['410.9 '] '410.9' in '41
背景 在 PowerShell 中构建 hash table 是很常见的通过特定属性快速访问对象,例如以 LastName 为基础建立索引: $List = ConvertFrom-Csv @' I
我真的很难弄清楚如何调用嵌套 Polymer Web 组件的函数。 这是标记: rise-distribution组件有 canPlay我想从 rise-playlist
我写了一个小工具转储(以 dot 格式)一个项目的依赖关系图,其中所有位于同一目录中的文件都聚集在一个集群中。当我尝试生成包含相应图形的 pdf 时,dot开始哭: 命令 dot -Tpdf trim
给定一个 CODE ref,是否可以: 访问该 CODE ref 的解析树 通过指定 CODE ref 的解析树来创建一个新的 CODE ref,该解析树可以包含在 1 中返回的解析树的元素 通常我们
我是一名优秀的程序员,十分优秀!