在使用React导航版本5时,可以通过以下步骤传递自定义属性:
npm install react-router-dom@5
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Link
组件将其链接到导航中的某个路径。例如:const CustomComponent = ({ customProp }) => {
return (
<div>
<h1>Custom Component</h1>
<p>Custom Prop: {customProp}</p>
</div>
);
};
const App = () => {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/custom">Custom Component</Link>
</li>
</ul>
</nav>
<Route path="/custom">
<CustomComponent customProp="Hello, World!" />
</Route>
</Router>
);
};
在上面的例子中,我们创建了一个名为CustomComponent
的组件,并通过customProp
属性传递了自定义的值。然后,我们使用Link
组件将该组件链接到路径/custom
。
App
组件:ReactDOM.render(<App />, document.getElementById('root'));
这样,当用户点击导航中的链接时,React导航版本5会自动渲染CustomComponent
组件,并将自定义属性传递给它。你可以根据需要在CustomComponent
组件中使用该属性。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云