如何在react-router中隐藏特定路由上的按钮组件

在React应用中使用react-router时，你可能会遇到需要在特定路由上隐藏某些组件（例如按钮）的情况。你可以通过检查当前的路由路径来实现这一点。以下是一个详细的示例，展示了如何在特定路由上隐藏按钮组件。

示例代码

• 安装react-router-dom： 如果你还没有安装react-router-dom，可以使用以下命令进行安装：

npm install react-router-dom

• 创建React组件和路由： 创建一个React应用，并设置路由和组件。我们将创建一个按钮组件，并在特定路由上隐藏它。

// App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom'; const Home = () => <h2>Home Page</h2>; const About = () => <h2>About Page</h2>; const Contact = () => <h2>Contact Page</h2>; const Button = () => { const location = useLocation(); const hideButtonOnPaths = ['/about', '/contact']; if (hideButtonOnPaths.includes(location.pathname)) { return null; } return <button>Click Me</button>; }; const App = () => { return ( <Router> <div> <Button /> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </Router> ); }; export default App;

详细解释

1. 导入必要的模块：
   • 从react-router-dom中导入BrowserRouter（重命名为Router）、Route、Switch和useLocation。
2. 定义页面组件：
   • 定义三个简单的页面组件：Home、About和Contact，它们分别显示不同的内容。
3. 定义按钮组件：
   • 创建一个名为Button的组件。
   • 使用useLocation钩子获取当前的路由路径。
   • 定义一个数组hideButtonOnPaths，包含需要隐藏按钮的路径。
   • 检查当前路径是否在hideButtonOnPaths数组中，如果是，则返回null，否则返回按钮组件。
4. 设置路由：
   • 使用Router包裹整个应用。
   • 在Router内部，首先渲染Button组件，然后使用Switch和Route定义不同的路由。

运行示例

• 创建React应用：如果你还没有创建React应用，可以使用create-react-app来创建：

npx create-react-app my-app cd my-app

• 安装react-router-dom：

npm install react-router-dom

• 替换src/App.js内容：将上述代码复制到src/App.js中。
• 运行应用：

npm start

• 测试应用：
• 访问/路径，你应该会看到按钮。
• 访问/about或/contact路径，按钮应该会隐藏。