Phản ứng: sự khác biệt giữa <Lộ trình chính xác = Đường / Trực tiếp /> và <Đường dẫn = Đường / Tấn />

Ai đó có thể giải thích sự khác biệt giữa

<Route exact path="/" component={Home} />

và

<Route path="/" component={Home} />

Tôi không biết ý nghĩa của 'chính xác'

Trong ví dụ này, không có gì thực sự. Thông số exactphát huy tác dụng khi bạn có nhiều đường dẫn có cùng tên:

Ví dụ, hãy tưởng tượng chúng ta có một Usersthành phần hiển thị danh sách người dùng. Chúng tôi cũng có một CreateUserthành phần được sử dụng để tạo người dùng. Các url cho CreateUsersnên được lồng dưới Users. Vì vậy, thiết lập của chúng tôi có thể trông giống như thế này:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Bây giờ vấn đề ở đây, khi chúng ta đi đến http://app.com/usersbộ định tuyến sẽ đi qua tất cả các tuyến đã xác định của chúng ta và trả về kết quả khớp đầu tiên mà nó tìm thấy. Vì vậy, trong trường hợp này, nó sẽ tìm Userstuyến đường trước và sau đó trả lại. Tất cả đều tốt.

Nhưng, nếu chúng tôi đã đi http://app.com/users/create, nó sẽ lại đi qua tất cả các tuyến đường đã xác định của chúng tôi và trả lại trận đấu ĐẦU TIÊN mà nó tìm thấy. Bộ định tuyến React không khớp một phần, do đó /userskhớp một phần /users/create, do đó nó sẽ trả lại Userstuyến một cách không chính xác !

Thông số exactvô hiệu hóa khớp một phần cho một tuyến và đảm bảo rằng nó chỉ trả về tuyến nếu đường dẫn là khớp chính xác với url hiện tại.

Vì vậy, trong trường hợp này, chúng ta nên thêm exactvào Userstuyến đường của mình để nó chỉ khớp với /users:

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Các tài liệu giải thích exactchi tiết và đưa ra các ví dụ khác.

Nói tóm lại, nếu bạn có nhiều tuyến đường được xác định cho định tuyến của ứng dụng, được đính kèm với Switchthành phần như thế này;

<Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

Sau đó, bạn phải đặt exacttừ khóa vào Tuyến đường mà đường dẫn của nó cũng được bao gồm bởi đường dẫn của Tuyến khác. Ví dụ: đường dẫn nhà /được bao gồm trong tất cả các đường dẫn vì vậy nó cần phải có exacttừ khóa để phân biệt nó với các đường dẫn khác bắt đầu bằng /. Lý do cũng tương tự như /functionsđường dẫn. Nếu bạn muốn sử dụng một tuyến đường khác như /functions-detailhoặc /functions/open-doorbao gồm /functionstrong đó thì bạn cần sử dụng exactcho /functionstuyến đường.

Hãy xem tại đây: https://reacttraining.com/react-router/core/api/Route/exact-bool

chính xác: bool

Khi đúng, sẽ chỉ khớp nếu đường dẫn khớp location.pathnamechính xác.

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

Câu trả lời ngắn nhất là

Hãy thử điều này.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>