React-Router: Không tìm thấy lộ trình?

Question

xem xét như sau:

var AppRoutes = [ 
    <Route handler={App} someProp="defaultProp"> 
     <Route path="/" handler={Page} /> 
    </Route>, 

    <Route handler={App} someProp="defaultProp"> 
     <Route path="/" handler={Header} > 
      <Route path="/withheader" handler={Page} /> 
     </Route> 
    </Route>, 

    <Route handler={App} someProp="defaultProp"> 
     <Route path=":area" handler={Area} /> 
     <Route path=":area/:city" handler={Area} /> 
     <Route path=":area/:city/:locale" handler={Area} /> 
     <Route path=":area/:city/:locale/:type" handler={Area} /> 
    </Route> 
]; 

Tôi có một mẫu App, một HeaderTemplate, và thiết lập tham số của các tuyến đường với bộ xử lý tương tự (trong App mẫu). Tôi muốn có thể phục vụ các tuyến đường 404 khi không tìm thấy thứ gì đó. Ví dụ,/CA/SanFrancisco nên được tìm thấy và xử lý bởi Khu vực, trong khi/SanFranciscoz nên 404.

Đây là cách tôi nhanh chóng kiểm tra các tuyến đường.

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){ 
    Router.run(AppRoutes, path, function(Handler, state){ 
     var output = React.renderToString(<Handler/>); 
     console.log(output, '\n'); 
    }); 
}); 

Vấn đề là/SanFranciscoz luôn được xử lý bởi các trang Diện tích, nhưng tôi muốn nó 404. Ngoài ra, nếu tôi thêm một NotFoundRoute để cấu hình tuyến đường đầu tiên, tất cả các trang Diện tích 404.

<Route handler={App} someProp="defaultProp"> 
    <Route path="/" handler={Page} /> 
    <NotFoundRoute handler={NotFound} /> 
</Route>, 

Tôi đang làm gì sai?

Dưới đây là một ý chính có thể được tải xuống và thử nghiệm.

https://gist.github.com/adjavaherian/aa48e78279acddc25315

Answer 1

Dejakob là đúng, defaultroute và NotFoundRoute đã được gỡ bỏ trong phản ứng-router 1.0.0. Tôi muốn nhấn mạnh rằng tuyến đường mặc định với dấu hoa thị phải là cuối cùng ở cấp phân cấp hiện tại để hoạt động. Nếu không nó sẽ phù hợp với tất cả các tuyến đường xuất hiện sau khi nó trong cây.

Đối với phản ứng-router 1, 2 và 3

Nếu bạn muốn hiển thị một 404 và giữ con đường (Tương tự chức năng như NotFoundRoute)

<Route path='*' exact={true} component={My404Component} /> 

Nếu bạn muốn hiển thị một trang 404 nhưng thay đổi url (cùng chức năng như DefaultRoute)

<Route path='/404' component={My404Component} /> 
<Redirect from='*' to='/404' /> 

Ví dụ với nhiều cấp độ:

<Route path='/' component={Layout} /> 
    <IndexRoute component={MyComponent} /> 
    <Route path='/users' component={MyComponent}> 
     <Route path='user/:id' component={MyComponent} /> 
     <Route path='*' component={UsersNotFound} /> 
    </Route> 
    <Route path='/settings' component={MyComponent} /> 
    <Route path='*' exact={true} component={GenericNotFound} /> 
</Route> 

Đối với phản ứng-router 4

Giữ con đường

<Switch> 
    <Route exact path="/" component={MyComponent} /> 
    <Route component={GenericNotFound} /> 
</Switch> 

Redirect để định tuyến khác (thay đổi url)

<Switch> 
    <Route path="/users" component={MyComponent} /> 
    <Redirect to="/404" /> 
</Switch> 

Answer 2

Tôi chỉ có một cái nhìn lướt qua ví dụ của bạn, nhưng nếu tôi hiểu nó một cách đúng đắn bạn đang cố gắng thêm 404 tuyến đường để phân đoạn năng động. Tôi đã cùng một vấn đề một vài ngày trước, tìm thấy #458 và #1103 và kết thúc với một tấm séc tay thực hiện trong chức năng render:

if (!place) return <NotFound />; 

hy vọng rằng sẽ giúp!

Answer 3

Theo documentation, tuyến đường "đã được tìm thấy", mặc dù tài nguyên không phải là.

Lưu ý: Điều này không có ý định sử dụng khi không tìm thấy tài nguyên. Có một sự khác biệt giữa các bộ định tuyến không tìm thấy một đường dẫn phù hợp và một URL hợp lệ dẫn đến một nguồn tài nguyên không được tìm thấy. Các khóa học url/123 là một url hợp lệ và kết quả trong một tuyến đường phù hợp, do đó nó đã được "tìm thấy" như xa như định tuyến là có liên quan. Sau đó, nếu chúng tôi lấy một số dữ liệu và phát hiện ra rằng khóa học 123 không tồn tại, chúng tôi không muốn chuyển sang một tuyến đường mới. Cũng giống như trên máy chủ, bạn tiếp tục và phục vụ url nhưng hiển thị giao diện người dùng khác (và sử dụng mã trạng thái khác). Bạn không bao giờ nên thử chuyển sang NotFoundRoute.

Vì vậy, bạn luôn có thể thêm một dòng trong số Router.run() trước React.render() để kiểm tra xem tài nguyên có hợp lệ hay không. Chỉ cần vượt qua một prop xuống thành phần hoặc ghi đè lên các thành phần Handler với một tùy chỉnh để hiển thị xem NotFound.

Answer 4

Với phiên bản mới của Bộ định tuyến phản ứng (sử dụng 2.0.1 bây giờ), bạn có thể sử dụng dấu hoa thị làm đường dẫn để định tuyến tất cả 'các đường dẫn khác'.

Vì vậy, nó sẽ trông như thế này: câu trả lời

<Route route="/" component={App}> 
    <Route path=":area" component={Area}> 
     <Route path=":city" component={City} /> 
     <Route path=":more-stuff" component={MoreStuff} />  
    </Route> 
    <Route path="*" component={NotFoundRoute} /> 
</Route> 

Answer 5

Trong phiên bản mới hơn phiên bản của bộ phản ứng-router bạn muốn wrap the routes in a Switch chỉ hiển thị thành phần phù hợp đầu tiên. Nếu không, bạn sẽ thấy nhiều thành phần được hiển thị.

Ví dụ:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Route, 
    browserHistory, 
    Switch 
} from 'react-router-dom'; 

import App from './app/App'; 
import Welcome from './app/Welcome'; 
import NotFound from './app/NotFound'; 

const Root =() => (
    <Router history={browserHistory}> 
    <Switch> 
     <Route exact path="/" component={App}/> 
     <Route path="/welcome" component={Welcome}/> 
     <Route path="*" component={NotFound}/> 
    </Switch> 
    </Router> 
); 

ReactDOM.render(
    <Root/>, 
    document.getElementById('root') 
);