react-router-dom 条件渲染

Question

我想在路由路径为“/flower”时添加更多代码

所以我的代码如下。

[App.js]

class App extends Component {
  render() {
    return (
      <Router>
      <div className="App">
        <Header />
        <SideBar />
        <section>
          <Route exact path="/" component={Home} />
          <Route exact path="/flower" component={Flower} />
          <Route exact path="/editorial" component={Editorial} />
        </section>
        <Footer />
      </div>
      </Router>
    );
  }
}

[SideBar.js]

import React, { Component } from 'react';
import './index.css';
import { NavLink } from 'react-router-dom';

class index extends Component {
    render() {
        return (
            <aside>
                <NavLink exact to="/" className="item"><i className="fas fa-home"></i>HOME</NavLink>
                <NavLink to="/flower" className="item"><i className="fab fa-pagelines"></i>FLOWER</NavLink>
                <NavLink to="/editorial" className="item"><i className="fas fa-newspaper"></i>EDIT</NavLink>

            </aside>
        );
    }
}

除 /flower 外，所有页面的侧边栏都相同。

当用户输入 /flower 时，我想向我的 SideBar 添加更多代码。

[不是/花]

[用户进入 /flower]

但是，我不知道如何检测当前路径是/flower。

有什么解决方案或指南吗？

谢谢。

Answer 1

But, I don't know how can I detect that current path is /flower.

但是你已经用 Route 这样做了:)

<Route exact path="/" component={Home} />
<Route exact path="/flower" component={Flower} />
<Route exact path="/editorial" component={Editorial} />

您根据当前路径有条件地渲染组件。因此 Home、Flower 或 Editorial 将被呈现 if 当前 URL 路径匹配 path 您传递给 Route.

您可以在补充工具栏中执行完全相同的操作：

<aside>
   <NavLink exact to="/" className="item"><i className="fas fa-home"></i>HOME</NavLink>
   <NavLink to="/flower" className="item"><i className="fab fa-pagelines"></i>FLOWER</NavLink>
   <NavLink to="/editorial" className="item"><i className="fas fa-newspaper"></i>EDIT</NavLink>

   <Route 
     path="/flower" 
     render={() => (
       <div>
        <p>more stuff</p>
       </div>
     )} 
   />
</aside>

我使用了 render，但您可以像在其他 Route 中一样使用 component 道具。

react-router-dom 条件渲染

react-router-dom conditional rendering

reactjs

react-router-dom