Как мне перенаправить, если пользователь переходит на непубличный URL в React?

Question

ОК, поэтому у меня есть компонент шаблона с именем Page .Если я пойду по разным маршрутам, будет использоваться один и тот же шаблон с другой информацией.Это то, что у меня внутри страницы:

class Page extends Component {
  render() {
    console.log(this.props.children);
    return (
      <div className="page">
        <Header></Header>
        {this.props.children}
      </div>
    );
  }
}

, и это компонент Routes.js:

<Route path="/" render={() => (
  <Page>
    <Switch>
      <Route path='/home' component={Home}></Route>
      <Route path='/users/new' component={RegistrationForm}></Route>
      <Route path='/users' component={Table}></Route>
    </Switch>
  </Page>
)}></Route>

Однако, когда я иду на localhost: 3000 / он показывает шаблон безчто-нибудь.Я хотел перенаправить на / home, если пользователь заходит на /.

Я пытался разместить

<Redirect>

примерно так:

<Route path='/' render={() => (
  <Fragment>
    <Redirect to='/home'></Redirect>
    <Page>
      <Switch>
        <Route path='/home' component={Home}></Route>
        <Route path='/users/new' component={RegistrationForm}></Route>
        <Route path='/users' component={Table}></Route>
      </Switch>
    </Page>
  </Fragment>
)}></Route>

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

Answer 1

Вам необходимо использовать свойства from и exact.Чтобы использовать оба свойства, такой Redirect должен быть дочерним по отношению к компоненту Switch (посмотрите документы здесь ):

<Route path='/' render={() => (
  <Page>
    <Switch>
      <Redirect exact from='/' to='/home'></Redirect>
      <Route path='/home' component={Home}></Route>
      <Route path='/users/new' component={RegistrationForm}></Route>
      <Route path='/users' component={Table}></Route>
    </Switch>
  </Page>
)}></Route>

Answer 2

Должно быть просто:)

Вам просто нужно добавить из пропеллера в <Redirect> и разместить его в качестве первого маршрута:

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