react-router-dom条件渲染

Question

我希望在路由路径为＆＃34; / flower＆＃34;

时添加更多代码

所以我的代码在下面。

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

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

[不/花]

[用户进入/开花]

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

有任何解决方案或指南吗？

感谢。

Answer 1

  

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

但您已经使用Route执行此操作：）

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

您有条件地根据当前路径渲染组件。因此，Home，Flower或Editorial将呈现，如果当前网址路径匹配您传递给path的{​​{1}}匹配器。

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

Route

我使用了render，但您可以像其他<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> 一样使用component道具。