React-Router: Không tìm thấy tuyến đường?

Hãy xem xét những điều sau đây:

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ẫu ứng dụng, HeaderTemplate và Tập hợp các tuyến đường được tham số hóa với cùng một trình xử lý (trong mẫu Ứng dụng). Tôi muốn có thể phục vụ các tuyến 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 Area, 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 trang Area, nhưng tôi muốn nó thành 404. Ngoài ra, nếu tôi thêm NotFoundRoute vào cấu hình tuyến đầu tiên, tất cả các trang Area 404.

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

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

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

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

DefaultRoute và NotFoundRoute đã bị xóa trong Reac-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 trong mức phân cấp hiện tại để hoạt động. Nếu không, nó sẽ ghi đè tất cả các tuyến đường khác xuất hiện sau nó trong cây bởi vì nó đầu tiên và phù hợp với mọi đường dẫn.

Đối với bộ định tuyến phản ứng 1, 2 và 3

Nếu bạn muốn hiển thị 404 và giữ đường dẫn (Chức năng tương tự như NotFoundRoute)

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

Nếu bạn muốn hiển thị trang 404 nhưng thay đổi url (Chức năng tương tự 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 bộ định tuyến phản ứng 4 và 5

Giữ đường

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

Chuyển hướng đến một tuyến đường khác (thay đổi url)

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

Vấn đề đặt hàng!

Trong các phiên bản mới hơn của bộ định tuyến phản ứng, bạn muốn bọc các tuyến đường trong 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 kết xuất.

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 component={NotFound}/>
    </Switch>
  </Router>
);

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

Với phiên bản mới của React Router (sử dụng 2.0.1 ngay 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:

<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>

Câu trả lời này dành cho React-router-4. Bạn có thể bao bọc tất cả các tuyến trong khối Chuyển đổi, có chức năng giống như biểu thức trường hợp chuyển đổi và kết xuất thành phần với tuyến được khớp đầu tiên. ví dụ)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

Khi nào sử dụng exact

Nếu không có chính xác:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

Với chính xác:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

Bây giờ nếu bạn chấp nhận các tham số định tuyến và nếu nó không chính xác, bạn có thể xử lý nó trong chính thành phần đích. ví dụ)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

Bây giờ trong ProfilePage.js

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

Để biết thêm chi tiết bạn có thể đi qua mã này:

App.js

ProfilePage.js

Theo tài liệu , tuyến đường đã được tìm thấy, mặc dù tài nguyên không có.

Lưu ý : Điều này không có ý định được sử dụng khi không tìm thấy tài nguyên. Có một sự khác biệt giữa bộ định tuyến không tìm thấy đường dẫn phù hợp và URL hợp lệ dẫn đế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à dẫn đến một tuyến phù hợp, do đó nó được "tìm thấy" khi có liên quan đến định tuyến. Sau đó, nếu chúng tôi tìm nạp một số dữ liệu và phát hiện ra rằng khóa 123 không tồn tại, chúng tôi không muốn chuyển sang một tuyến mới. Giống như trên máy chủ, bạn tiếp tục và cung cấp url nhưng hiển thị giao diện người dùng khác nhau (và sử dụng mã trạng thái khác). Bạn không bao giờ nên cố gắng chuyển sang NotFoundRoute.

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

Tôi vừa xem qua ví dụ của bạn, nhưng nếu tôi hiểu đúng về cách bạn đang cố gắng thêm các tuyến 404 vào các phân đoạn động. Tôi đã gặp vấn đề tương tự một vài ngày trước, tìm thấy # 458 và # 1103 và kết thúc bằng một kiểm tra được thực hiện trong chức năng kết xuất:

if (!place) return <NotFound />;

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