我有以下结构为我的React.js应用程序使用React路由器:
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var Index = React.createClass({
render: function () {
return (
<div>
<header>Some header</header>
<RouteHandler />
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
我想把一些属性传递给Comments组件。
(通常我会这样做，如<Comments myprop="value" />)
用React路由器最简单和正确的方法是什么?
使用自定义路由组件，这在React Router v3中是可能的。
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
<Route path="/" handler={Index}>
<MyRoute myprop="value" path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
对于<MyRoute>组件代码，它应该类似于:
import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';
const MyRoute = () => <div><MyRoute> elements are for configuration only and should not be rendered</div>;
MyRoute.createRouteFromReactElement = (element, parentRoute) => {
const { path, myprop } = element.props;
// dynamically add crud route
const myRoute = createRoutesFromReactChildren(
<Route path={path} />,
parentRoute
)[0];
// higher-order component to pass myprop as resource to components
myRoute.component = ({ children }) => (
<div>
{React.Children.map(children, child => React.cloneElement(child, { myprop }))}
</div>
);
return myRoute;
};
export default MyRoute;
有关自定义路由组件方法的更多详细信息，请查看我关于该主题的博客文章:http://marmelab.com/blog/2016/09/20/custom-react-router-component.html
你也可以结合es6和无状态函数来得到一个更清晰的结果:
import Dashboard from './Dashboard';
import Comments from './Comments';
let dashboardWrapper = () => <Dashboard {...props} />,
commentsWrapper = () => <Comments {...props} />,
index = () => <div>
<header>Some header</header>
<RouteHandler />
{this.props.children}
</div>;
routes = {
component: index,
path: '/',
childRoutes: [
{
path: 'comments',
component: dashboardWrapper
}, {
path: 'dashboard',
component: commentsWrapper
}
]
}
反应路由器v 4解决方案
今天早些时候我偶然发现了这个问题，下面是我使用的模式。希望这对那些正在寻找最新解决方案的人有用。
我不确定这是否是最好的解决方案，但这是我目前的模式。我通常有一个核心目录，我保存我常用的组件及其相关配置(加载器，模态等)，我包括一个这样的文件:
import React from 'react'
import { Route } from 'react-router-dom'
const getLocationAwareComponent = (component) => (props) => (
<Route render={(routeProps) => React.createElement(component,
{...routeProps, ...props})}/>
)
export default getLocationAwareComponent
然后，在有问题的文件中，我将执行以下操作:
import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)
// in render method:
<SomeComponent someProp={value} />
您会注意到我将组件的默认导出导入为humble camel-case，这让我可以在CamelCase中命名新的位置感知组件，以便正常使用它。除了额外的导入行和赋值行之外，组件的行为与预期一致，并正常接收它的所有道具，并添加了所有路由道具。因此，我可以愉快地使用this.props.history.push()重定向组件生命周期方法，检查位置等。
希望这能有所帮助!
我已经在这里回答了这个问题。
下面是几种将道具传递给路由组件的方法。
使用react-router v5，我们可以通过封装组件来创建路由，这样我们就可以像这样轻松地将道具传递给所需的组件。
<Route path="/">
<Home name="Sai" />
</Route>
类似地，您可以在v5中使用子道具。
<Route path="/" children={ <Home name="Sai" />} />
如果您正在使用react-router v4，您可以使用渲染道具传递它。
旁注-引用React路由器children-func文档
有时您需要呈现路径是否匹配位置或
不是。在这些情况下，您可以使用函数child prop。它的工作原理
和渲染完全一样，除了它会被调用是否有
匹配与否。
<Route path="/" render={() => <Home name="Sai" />} />
(最初发布于https://reactgo.com/react-router-pass-props/)
使用自定义路由组件，这在React Router v3中是可能的。
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
<Route path="/" handler={Index}>
<MyRoute myprop="value" path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
对于<MyRoute>组件代码，它应该类似于:
import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';
const MyRoute = () => <div><MyRoute> elements are for configuration only and should not be rendered</div>;
MyRoute.createRouteFromReactElement = (element, parentRoute) => {
const { path, myprop } = element.props;
// dynamically add crud route
const myRoute = createRoutesFromReactChildren(
<Route path={path} />,
parentRoute
)[0];
// higher-order component to pass myprop as resource to components
myRoute.component = ({ children }) => (
<div>
{React.Children.map(children, child => React.cloneElement(child, { myprop }))}
</div>
);
return myRoute;
};
export default MyRoute;
有关自定义路由组件方法的更多详细信息，请查看我关于该主题的博客文章:http://marmelab.com/blog/2016/09/20/custom-react-router-component.html
