Как установить 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 отображается некорректно, поскольку любая * Dashboard должна отображаться в Dashboard.

Я хотел бы, чтобы мой DefaultRoute в маршруте «app» указывал на «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} />

Но это создает два разных пути, которые отображают один и тот же компонент. Это не только бессмысленно, но и может вызвать сбои в вашем пользовательском интерфейсе, то есть когда вы стилизуете <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

это сделает так, что когда вы загружаете сервер на локальный хост, он перенаправит вас на / something

ОБНОВИТЬ : 2020

Вместо использования перенаправления просто добавьте несколько маршрутов в 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>