DefaultRoute'u React Router'da başka bir Route'a ayarlama

Aşağıdakilere sahibim:

  <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 kullanılırken, herhangi bir * Gösterge Tablosunun Gösterge Tablosu içinde oluşturulması gerektiğinden SearchDashboard hatalı şekilde oluşturulur.

DefaultRoute'umun "app" Route içinde Route "searchDashboard" a işaret etmesini istiyorum. Bu, React Router ile yapabileceğim bir şey mi yoksa bunun için normal Javascript (bir sayfa yönlendirmesi için) kullanmalı mıyım?

Temel olarak, kullanıcı ana sayfaya giderse, bunun yerine onu arama panosuna göndermek istiyorum. Bu yüzden sanırım eşdeğer bir React Router özelliği arıyorumwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

DefaultRoute yerine Redirect'i kullanabilirsiniz

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

Yenilemeyle ilgili sorunları önlemek için, Ogglas sayesinde bunu kullanın.

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

Kullanmayla ilgili sorun <Redirect from="/" to="searchDashboard" />, örneğin farklı bir URL'niz varsa /indexDashboardve kullanıcı yenile tuşuna basarsa veya kendisine gönderilen bir URL alırsa, kullanıcı /searchDashboardyine de yeniden yönlendirilecektir .

Kullanıcıların siteyi yenilemesini veya URL göndermesini istemiyorsanız, bunu kullanın:

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

Girişin searchDashboardgerisindeyse bunu kullanın :

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

Yanlışlıkla varsayılan bir yol oluşturmaya çalışıyordum:

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

Ancak bu, aynı bileşeni oluşturan iki farklı yol oluşturur. Bu sadece anlamsız olmakla kalmaz, aynı zamanda kullanıcı arayüzünüzde hatalara neden olabilir, yani <Link/>öğeleri temel alarak stil oluştururkenthis.history.isActive() .

Varsayılan bir yol oluşturmanın doğru yolu (bu, dizin yolu değildir) aşağıdakileri kullanmaktır <IndexRedirect/>:

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

Bu, react-router 1.0.0'a dayanır. Bkz. Https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js .

Jonathan'ın cevabı bende işe yaramadı. React v0.14.0 ve React Router v1.0.0-rc3 kullanıyorum. Bu yaptı:

<IndexRoute component={Home}/>.

Bu yüzden Matthew's Case'de şunu isteyeceğine inanıyorum

<IndexRoute component={SearchDashboard}/>.

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

bu, sunucuyu yerel ana bilgisayara yüklediğinizde sizi / bir şeye yönlendirecek şekilde yapacaktır.

GÜNCELLEME : 2020

Yönlendirme kullanmak yerine, tek yapmanız gereken path

Misal:

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

Benzer bir sorunla karşılaştım; Yol işleyicinin hiçbiri eşleşmediğinde varsayılan bir yol işleyici istedim.

Çözümlerim, yol değeri olarak bir joker karakter kullanmaktır. yani, güzergah tanımınızdaki son girdi olduğundan da emin olun.

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

2017'ye girenler için bu yeni çözüm 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>

Tercih edilen yöntem, tepki yönlendiricisini kullanmaktır IndexRoutes bileşenini kullanmaktır

Bunu şu şekilde kullanırsınız (yukarıda bağlantısı verilen react yönlendirici belgelerinden alınmıştır):

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

Bunu, belirli bir URL'de yeniden yönlendirme yapmak ve eski yönlendiriciden yeni yönlendiriciye yeniden yönlendirdikten sonra bileşeni oluşturmak için bu şekilde kullanırsınız.

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