reactjs - 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>
    );
  }
}

[侧边栏.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 之外，所有页面的 SideBar 都相同。

当用户输入/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将呈现 如果 当前 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但你可以使用 component Prop 和其他一样 Route s。