要使用React Router DOM来呈现一个组件中另一个组件中的链接,你需要按照以下步骤进行操作:
npm install react-router-dom
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Link
组件来创建链接。例如,你可以在一个组件中创建一个链接到另一个组件的按钮:function Component1() {
return (
<div>
<h1>Component 1</h1>
<Link to="/component2">Go to Component 2</Link>
</div>
);
}
Route
组件来定义路由。将Component1
和Component2
与相应的路径关联起来:function App() {
return (
<Router>
<Route path="/" exact component={Component1} />
<Route path="/component2" component={Component2} />
</Router>
);
}
Component2
组件,并在该组件中显示你想要呈现的内容:function Component2() {
return (
<div>
<h1>Component 2</h1>
<p>This is Component 2.</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
现在,当你点击Component1
组件中的链接时,你将被导航到Component2
组件,并在页面上看到Component2
的内容。
请注意,以上示例中的代码是使用React函数组件和JSX语法编写的。如果你使用的是类组件,你需要相应地进行调整。另外,这只是React Router DOM的基本用法示例,你可以根据自己的需求进行更复杂的路由配置和组件嵌套。
领取专属 10元无门槛券
手把手带您无忧上云