React Router รับ `‹NavLink /›` ใดที่ใช้งานอยู่

ฉันแสดงผล <NavLink /> เหมือนด้านล่าง

<div class="container">
  <NavLink to="/" exact></NavLink>
  <NavLink to="/profile"></NavLink>
  <NavLink to="/message"></NavLink>
</div>

เป็นเรื่องดีที่ react-router จะเพิ่มคลาส active ที่ตรงกันในปัจจุบัน

แต่ฉันจะรู้ได้อย่างไรว่าอันไหนที่ใช้งานอยู่?

เพราะฉันมีสไตล์อื่นๆ ที่ต้องปรับเปลี่ยนตามนี้ เช่น เมื่อใน '/' ฉันต้องการให้ระยะห่างจากขอบด้านซ้าย .container 100px และเมื่ออยู่ใน '/profile' ฉันต้องการให้ระยะห่างจากช่องว่างด้านซ้าย .container 200px


reactjs react-router
person Littlee    schedule 12.04.2019    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

คุณสามารถใช้ withRouter เพื่อรับเส้นทางของเพจปัจจุบัน โดยใช้ชื่อพาธที่คุณสามารถบันทึกได้ ซึ่งเป็นเพจปัจจุบันของคุณ

import React from "react";
import { withRouter } from "react-router";

class Location extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

const WithRouter = withRouter(ShowTheLocation);
person mitesh7172    schedule 12.04.2019

arrow_upward
0
arrow_downward

คุณสามารถเพิ่ม activeClassName ที่แตกต่างกันให้กับแต่ละรายการได้

(ดู https://reacttraining.com/react-router/web/api/NavLink< /ก>)

ตัวอย่างเช่น

<div class="container">
<NavLink to="/" exact></NavLink>
<NavLink to="/profile" activeClassName="matched-profile"></NavLink>
<NavLink to="/message"></NavLink>
</div>

จากนั้นจัดรูปแบบคอนเทนเนอร์เช่นนี้ .container:has(.matched-profile)

person rkouye    schedule 12.04.2019