React Router v4 hiển thị nhiều tuyến đường

Question

Tôi đang tạo SPA và tôi đang cố gắng thiết lập Định tuyến trong ứng dụng bằng cách sử dụng phiên bản gói react-router-dom4.1.1.

Route Định nghĩa của tôi là dưới đây:

<BrowserRouter> 
    <div> 
    <Route exact path="/" component={Login} /> 
    <Route path="/login" component={Login} /> 
    <Route path="404" component={NotFound} /> 
    <Route path="*" component={NotFound} /> 
    </div> 
</BrowserRouter> 

Về cơ bản, tôi muốn thiết lập định tuyến để bất kỳ yêu cầu đến một trang mà không có con đường được xác định đi đến thành phần {NotFound}.

Làm cách nào để đạt được điều này? Giải pháp trên ám chỉ cả Login và thành phần NotFound khi yêu cầu trang /login.

Kind coi

Answer 1

đây là một ví dụ từ official tutorial, làm thế nào để tránh render nhiều tuyến đường

import { Switch, Route } from 'react-router 

    <Switch> 
     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/:user" component={User}/> 
     <Route component={NoMatch}/> 
    </Switch> 

Answer 2

Make sử dụng Switch để làm cho trận đấu đầu tiên của tuyến đường, Bạn cần phải nhập khẩu Switch trước khi sử dụng

import {Switch} from 'react-router'; 

<BrowserRouter> 
    <Switch> 
    <Route exact path="/" component={Login} /> 
    <Route path="/login" component={Login} /> 
    <Route path="404" component={NotFound} /> 
    <Route path="*" component={NotFound} /> 
    </Switch> 
</BrowserRouter> 

Theo số docs

<Switch> là duy nhất ở chỗ nó chỉ hiển thị một tuyến đường. Ở độ tương phản , mỗi <Route> khớp với vị trí hiển thị một cách tổng thể.

Bây giờ, nếu chúng tôi đang ở số /login, <Switch> sẽ bắt đầu tìm kiếm khớp với <Route>. <Route path="/login"/> sẽ khớp và <Switch> sẽ ngừng tìm kiếm các kết quả phù hợp và hiển thị <Login>. nếu không thì đường trận /login với /login và * và làm cho cả hai tuyến đường

Tuy nhiên, khi sử dụng chuyển đổi thứ tự của đường vật chất, đảm bảo rằng bạn đang thêm các tuyến đường tiền tố sau khi tuyến đường khác. Ví dụ: '/ Home' phải sau '/' theo thứ tự Route hoặc nếu không, bạn có thể tận dụng các exact prop

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

Answer 3

Tôi nghĩ rằng trang notfound được trả lại vì <Route path="*" component={NotFound} /> quy tắc. Thuộc tính đường dẫn của Bộ định tuyến chấp nhận Bất kỳ đường dẫn URL hợp lệ nào mà đường dẫn-to-regexp hiểu được. Vì vậy, '*' có nghĩa là không hoặc nhiều thông số phù hợp với