Как установить DefaultRoute на другой маршрут в маршрутизаторе React

у меня есть следующие:

  <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 в маршруте "app" указать на маршрут "searchDashboard". Это то, что я могу сделать с маршрутизатором React, или я должен использовать обычный Javascript (для перенаправления страницы) для этого?

в основном, если пользователь переходит на домашнюю страницу, Я хочу отправить их вместо этого на панель поиска. Поэтому я думаю, что ищу функцию маршрутизатора React, эквивалентную window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

42
javascript react-router reactjs routes url-redirection

9 ответов

вы можете использовать перенаправление вместо DefaultRoute

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

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

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

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

34

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

ответ Джонатана, похоже, не сработал для меня. Я использую React v0.14.0 и реагировать маршрутизатор v1.0.0-rc3. Это сделало:

<IndexRoute component={Home}/>.

Так что в случае Мэтью, я думаю, он хотел бы:

<IndexRoute component={SearchDashboard}/>.

источник: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

9

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

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>
2
 <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>
1

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

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

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

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

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

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>
0
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

0