Liên kết hoạt động với React-Router?

Tôi đang thử React-Router (v4) và tôi gặp sự cố khi khởi động Nav để có một trong những điều Linkđó active. Nếu tôi nhấp vào bất kỳ Linkthẻ nào, thì nội dung đang hoạt động sẽ bắt đầu hoạt động. Tuy nhiên, tôi muốn Trang chủ Linkhoạt động ngay khi ứng dụng khởi động vì đó là thành phần tải tại /tuyến đường. Có cách nào để làm điều này?

Đây là mã hiện tại của tôi:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

<Link>không còn thuộc tính activeClassNamehoặc activeStyle. Trong react-router v4, bạn phải sử dụng <NavLink>nếu muốn tạo kiểu có điều kiện:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

Tôi đã thêm một thuộc tính chính xác vào ngôi nhà <NavLink>, tôi khá chắc chắn rằng nếu không có nó, liên kết trang chủ sẽ luôn hoạt động vì /sẽ phù hợp với /aboutbất kỳ trang nào khác mà bạn có.