Як встановити 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 в межах програми "Додаток" вказав на "ПошукDashboard" маршруту. Це щось, що я можу зробити з 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} />

Але це створює два різні шляхи, які відображають один і той же компонент. Це не тільки безглуздо, але це може спричинити збої у вашому інтерфейсі, тобто коли ви створюєте <Link/>елементи стилю на основі this.history.isActive().

Правильним способом створення маршруту за замовчуванням (це не індексний маршрут) є використання <IndexRedirect/>:

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

Це базується на реакційному маршрутизаторі 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}/>.

Тож у справі Метью я вважаю, що він хотів би:

<IndexRoute component={SearchDashboard}/>.

Джерело: 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

це зробить так, що коли ви завантажите сервер на локальний хост, він перенаправить вас до / чогось

ОНОВЛЕННЯ : 2020

Замість того, щоб використовувати Redirect, просто додайте кілька маршрутів у path

Приклад:

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

Я зіткнувся з подібним питанням; Я хотів обробник маршруту за замовчуванням, якщо жоден з обробників маршрутів не збігався.

Моє рішення - використовувати підстановочний знак як значення шляху. тобто також переконайтеся, що це останній запис у визначенні маршрутів.

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

Для тих, хто вступає в 2017 рік, це нове рішення з 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>