问题:
此动态路由器有效,除非存在涉及参数的动态链接。
具体地:
我可以硬编码链接或在浏览器中输入内容:
<Link to="Inventory/All-Vehicles">All Vehicles</Link>
http://localhost:3000/Inventory/All-Vehicles
并使用代码:
const { id } = this.props.params; console.log({ id } );
控制台显示:
{id: "All-Vehicles"}
然而 ,带有动态链接...
< Link to={ this.props.item.linkTo } className="">{ this.props.item.title }< /Link>
产生:
< a class="" href="#Inventory/All-Vehicles" data-reactid=".0.0.0.0.0.0.0.0.0.0.$2.1.0.$0.0.0.0">All Vehicles< /a>
浏览器显示
localhost:3000/#/Inventory/All-Vehicles
暂时然后重置为(页面不重新加载)
localhost:3000/#/Inventory
控制台显示:
Object {id: undefined}
根据约旦的建议,我重写了这个问题 我希望它不会太冗长。 我使用alt flux作为我的商店
routes.js:
import React, { Component, PropTypes } from 'react';
import Router, { Route } from 'react-router';
// alt
import connectToStores from '../../node_modules/alt/utils/connectToStores';
import NavStore from '../alt/stores/nav-store';
import NavActions from '../alt/actions/nav-actions';
class Routes extends Component {
constructor(props) {
super(props);
this.state = {
routes: []
};
}
static getStores() {
return [NavStore];
}
static getPropsFromStores() {
return NavStore.getState();
}
componentDidMount() {
const clientId = this.props.clientId;
NavActions.getAll(clientId);
}
fetchNonRootComponent(paths) {
let result;
paths.map((path) => {
if (path !== '/') {
result = path;
}
});
return result;
}
fetchMenuSystem(data) {
const self = this;
const currRoutesState = this.state.routes;
const routes = data === undefined ? this.props.items : data;
routes.map((route) => {
// set paths up first
let currPaths = [];
if (route.paths !== undefined) {
currPaths = route.paths;
} else {
currPaths.push(route.linkTo);
}
// Components - first check for ecomMods
let currComponent;
如果它在routes.js文件中,它可能有关于此部分的内容:
if (route.ecomMod !== undefined) {
currComponent = require('../components/pages/' + route.ecomMod);
// clear out currPath if this is an ecom Module
// and start a new currPaths array
currPaths = [];
if (route.parentId === null) {
currPaths.push(route.ecomMod);
} else {
// multi-purpose :id, eg.
// Inventory/Used-Vehicles
// Inventory/Stock#1234
currPaths.push(route.ecomMod + '/:id');
}
} else {
const nonRootComponent = self.fetchNonRootComponent(currPaths);
currComponent = require('../components/pages/' + nonRootComponent);
}
currPaths.map((currPath) => {
const props = { key: currPath, path: currPath, component: currComponent };
currRoutesState.push(<Route { ...props } />);
});
if (route.childNodes !== undefined) {
self.fetchMenuSystem(route.childNodes);
}
});
return currRoutesState;
}
fetchRoutes() {
const result = this.fetchMenuSystem();
return (
<Route component={ require('../components/APP') }>
{ result }
<Route path="SiteMap" component={ require('../components/pages/Site-Map') }/>
<Route path="*" component={ require('../components/pages/Not-Found') }/>
</Route>
);
}
render() {
if (this.props.items.length === 0) return <div>Loading ...</div>;
const routerProps = {
routes: this.fetchRoutes(),
createElement: (component, props) => {
return React.createElement(component, { ...props });
}
};
return (
<Router { ...routerProps } history= { this.props.history } />
);
}
}
Routes.propTypes = {
clientId: PropTypes.string.isRequired,
history: PropTypes.object.isRequired,
items: PropTypes.array.isRequired
};
export default connectToStores(Routes);
navItems.json:
{
"data": [
{
"id": 1,
"parentId": null,
"linkTo": "/",
"paths": [
"/",
"Home"
],
"title": "Home",
},
{
"id": 2,
"parentId": null,
"linkTo": "About-Us",
"title": "About Us",
},
{
"id": 3,
"parentId": null,
"ecomMod": "Inventory",
"linkTo": "Inventory",
"title": "Inventory",
"childNodes": [
{
"id": 30,
"parentId": 3,
"ecomMod": "Inventory",
"linkTo": "Inventory/All-Vehicles",
"title": "All Vehicles",
}
]
}
]
}
答案 0 :(得分:1)
<强>解决强>
差不多一天后,我解决了这个问题,而且我犯的错误是如此愚蠢而且显而易见,我无法相信我没有看到它。
我怀疑,动态路由器很好。问题出在下拉菜单中。我怀疑它是一个页面上的硬编码链接。
说明一下,这就是库存路线的创建方式:
<Route path="Inventory" component="Inventory">
<Route path="Inventory/All-Vehicles" component="Inventory" />
</Route>
所有人都明白,如果 坝父 有一个路由处理程序事件,那么全车点击会“冒泡”到它的父级,这正是我的意思。
所以,就我而言,这个父链接:
<li id={ this.props.item.id }
......
onClick={ this.routeHandler.bind(this, { newLinkTo } ) } >
<span className="">{ this.props.item.title }</span>
// get the children
<div>{ this.fetchSubMenu(this.props.item) }</div>
</li>
现在是:
<li id={ this.props.item.id }
......
>
<Link to={ newLinkTo } className="">{ this.props.item.title }</Link>
// get the children
<div>{ this.fetchSubMenu(this.props.item) }</div>
</li>
获得的经验:如果您在路径树上有路由处理程序,它将接管子项尝试进行的任何路由更改。