Как установить 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");

Ответы

Ответ 1

Вы можете использовать Redirect вместо DefaultRoute

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

Обновление 2019-08-09, чтобы избежать проблем с обновлением, используйте это вместо этого, благодаря Ogglas

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

Ответ 2

Проблема с использованием <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"/>
  )
)}/>

Ответ 3

Я неправильно пытался создать путь по умолчанию с помощью:

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Для тех, кто приходит в 2017 году, это новое решение с IndexRedirect:

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

Ответ 8

Предпочтительным методом является использование реактивного маршрутизатора IndexRoutes component

Вы используете его как это (взято из документов, относящихся к ответному маршрутизатору, связанным выше):

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

Ответ 9

У меня возникла аналогичная проблема; Мне нужен обработчик маршрута по умолчанию, если ни один из обработчиков маршрута не был сопоставлен.

Мои решения - использовать подстановочный знак в качестве значения пути. т.е. Также убедитесь, что это последняя запись в определении маршрутов.

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