Cách đặt DefaultRoute thành Route khác trong React Router

Tôi có những thứ sau:

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

Khi sử dụng DefaultRoute, SearchDashboard hiển thị không chính xác vì bất kỳ * Trang tổng quan nào cũng cần được hiển thị trong Trang tổng quan.

Tôi muốn DefaultRoute của mình trong Tuyến đường "ứng dụng" để trỏ đến Tuyến đường "searchDashboard". Đây là điều mà tôi có thể làm với React Router hay tôi nên sử dụng Javascript thông thường (để chuyển hướng trang) cho việc này?

Về cơ bản, nếu người dùng truy cập trang chủ, thay vào đó tôi muốn gửi họ đến bảng điều khiển tìm kiếm. Vì vậy, tôi đoán tôi đang tìm kiếm một tính năng của Bộ định tuyến React tương đương vớiwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Bạn có thể sử dụng Redirect thay vì DefaultRoute

<Redirect from="/" to="searchDashboard" />

Thay vào đó, hãy cập nhật 2019-08-09 để tránh sự cố khi sử dụng làm mới tính năng này, nhờ Ogglas

<Redirect exact from="/" to="searchDashboard" />

Vấn đề với việc sử dụng <Redirect from="/" to="searchDashboard" />là nếu bạn có một URL khác, chẳng hạn /indexDashboardvà người dùng nhấn vào làm mới hoặc nhận được một URL được gửi đến họ, người dùng sẽ được chuyển hướng đến/searchDashboard .

Nếu bạn không phải là người dùng để có thể làm mới trang web hoặc gửi URL, hãy sử dụng cái này:

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

Sử dụng cái này nếu searchDashboardđăng nhập sau:

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>

Tôi đã không chính xác khi cố gắng tạo một đường dẫn mặc định với:

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

Nhưng điều này tạo ra hai đường dẫn khác nhau hiển thị cùng một thành phần. Điều này không chỉ vô nghĩa mà còn có thể gây ra trục trặc trong giao diện người dùng của bạn, tức là khi bạn đang tạo kiểu <Link/>các phần tử dựa trênthis.history.isActive() .

Cách phù hợp để tạo một tuyến mặc định (đó không phải là tuyến chỉ mục) là sử dụng <IndexRedirect/>:

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

Điều này dựa trên react-router 1.0.0. Xem https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

Câu trả lời của Jonathan dường như không hiệu quả với tôi. Tôi đang sử dụng React v0.14.0 và React Router v1.0.0-rc3. Điều này đã làm:

<IndexRoute component={Home}/>.

Vì vậy, trong Trường hợp của Matthew, tôi tin rằng anh ấy muốn:

<IndexRoute component={SearchDashboard}/>.

Nguồn: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

điều này sẽ làm cho nó để khi bạn tải lên máy chủ trên máy chủ cục bộ, nó sẽ hướng bạn đến / cái gì đó

CẬP NHẬT : 2020

Thay vì sử dụng Chuyển hướng, Chỉ cần thêm nhiều tuyến đường trong path

Thí dụ:

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

Tôi đã gặp phải một vấn đề tương tự; Tôi muốn một trình xử lý tuyến đường mặc định nếu không có trình xử lý tuyến đường nào phù hợp.

Giải pháp của tôi là sử dụng ký tự đại diện làm giá trị đường dẫn. tức là Hãy chắc chắn rằng nó là mục nhập cuối cùng trong định nghĩa các tuyến đường của bạn.

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>

Đối với những người sắp bước vào năm 2017, đây là giải pháp mới với IndexRedirect:

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

 <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <Redirect from="/*" to="/" />
  </Route>

Phương pháp ưu tiên là sử dụng thành phần IndexRoutes của bộ định tuyến phản ứng

Bạn sử dụng nó như thế này (lấy từ tài liệu bộ định tuyến phản ứng được liên kết ở trên):

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>

Bạn sử dụng nó như thế này để chuyển hướng trên một URL cụ thể và hiển thị thành phần sau khi chuyển hướng từ bộ định tuyến cũ sang bộ định tuyến mới.

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>