วิธีตั้งค่า DefaultRoute เป็นเส้นทางอื่นใน React Router

ฉันมีสิ่งต่อไปนี้:

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

เมื่อใช้ DefaultRoute SearchDashboard จะแสดงผลไม่ถูกต้องเนื่องจากแดชบอร์ด * ใด ๆ จำเป็นต้องแสดงผลภายในแดชบอร์ด

ฉันต้องการให้ DefaultRoute ของฉันภายใน "แอป" เส้นทางชี้ไปที่เส้นทาง "searchDashboard" นี่คือสิ่งที่ฉันสามารถทำได้ด้วย React Router หรือฉันควรใช้ Javascript ปกติ (สำหรับการเปลี่ยนเส้นทางหน้า) สำหรับสิ่งนี้

โดยทั่วไปหากผู้ใช้ไปที่โฮมเพจฉันต้องการส่งไปที่แดชบอร์ดการค้นหาแทน ดังนั้นฉันเดาว่าฉันกำลังมองหาคุณสมบัติ React Router ที่เทียบเท่ากับwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

คุณสามารถใช้ Redirect แทน DefaultRoute

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

อัปเดต 2019-08-09 เพื่อหลีกเลี่ยงปัญหาในการรีเฟรชให้ใช้สิ่งนี้แทนขอบคุณ Ogglas

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

ปัญหาในการใช้<Redirect from="/" to="searchDashboard" />คือถ้าคุณมี URL อื่นพูด/indexDashboardและผู้ใช้กดรีเฟรชหรือได้รับ URL ที่ส่งถึงพวกเขาผู้ใช้จะถูกเปลี่ยนเส้นทาง/searchDashboardไป

หากคุณไม่ต้องการให้ผู้ใช้รีเฟรชไซต์หรือส่ง URL ให้ใช้สิ่งนี้:

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

ใช้สิ่งนี้หากsearchDashboardอยู่เบื้องหลังการเข้าสู่ระบบ:

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

ฉันพยายามสร้างเส้นทางเริ่มต้นอย่างไม่ถูกต้องด้วย:

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

แต่สิ่งนี้จะสร้างสองเส้นทางที่แตกต่างกันซึ่งแสดงผลคอมโพเนนต์เดียวกัน ไม่เพียง แต่จะไม่มีจุดหมายนี้ แต่มันสามารถทำให้เกิดความบกพร่องใน UI เช่นของคุณเมื่อคุณมีการจัดแต่งทรงผมองค์ประกอบอยู่บนพื้นฐานของ<Link/>this.history.isActive()

วิธีที่ถูกต้องในการสร้างเส้นทางเริ่มต้น (ซึ่งไม่ใช่เส้นทางดัชนี) คือการใช้<IndexRedirect/>:

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

สิ่งนี้ขึ้นอยู่กับ react-router 1.0.0 ดูhttps://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js

คำตอบของโจนาธานดูเหมือนจะไม่ได้ผลสำหรับฉัน ฉันใช้ React v0.14.0 และ React Router v1.0.0-rc3 สิ่งนี้ทำ:

<IndexRoute component={Home}/>.

ดังนั้นในกรณีของ Matthew ฉันเชื่อว่าเขาต้องการ:

<IndexRoute component={SearchDashboard}/>.

ที่มา: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

อัปเดต : 2020

แทนที่จะใช้การเปลี่ยนเส้นทางเพียงเพิ่มหลายเส้นทางในไฟล์ path

ตัวอย่าง:

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

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

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

สิ่งนี้จะทำให้เมื่อคุณโหลดเซิร์ฟเวอร์บนโลคัลโฮสต์มันจะนำคุณไปยัง / บางอย่าง

ฉันพบปัญหาที่คล้ายกัน ฉันต้องการตัวจัดการเส้นทางเริ่มต้นหากไม่มีตัวจัดการเส้นทางที่ตรง

วิธีแก้ปัญหาของฉันคือการใช้สัญลักษณ์แทนเป็นค่าพา ธ เช่นตรวจสอบให้แน่ใจว่าเป็นรายการสุดท้ายในนิยามเส้นทางของคุณ

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

สำหรับผู้ที่เข้ามาในปี 2560 นี่คือโซลูชันใหม่ที่มี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>

วิธีที่แนะนำคือการใช้ส่วนประกอบIndexRoutes ของเราเตอร์แบบตอบสนอง

คุณใช้สิ่งนี้ (นำมาจากเอกสารของเราเตอร์ตอบสนองที่เชื่อมโยงด้านบน)

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

คุณใช้วิธีนี้เพื่อเปลี่ยนเส้นทางไปยัง URL หนึ่ง ๆ และแสดงองค์ประกอบหลังจากเปลี่ยนเส้นทางจากเราเตอร์เก่าไปยังเราเตอร์ใหม่

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