reactjs - react-router-dom 条件渲染

Question

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

所以我的代码如下。

[应用程序.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，所有页面的侧边栏都是一样的。

当用户输入 /flower 时，我想在我的SideBar.

[不是/花]

[用户进入 /flower]

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

有什么解决方案或指导方针吗？

谢谢。

标签： reactjsreact-router-dom

Answer 1

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

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

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

您根据当前路径有条件地渲染组件。因此Home，如果当前 URL 路径与您传递给的匹配器匹配，则将呈现Flower或呈现。EditorialpathRoute

您可以在侧边栏中执行完全相同的操作：

<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但您可以像在其他s中一样使用componentprop 。Route