Question

好，所以我有一个名为 Page 的模板组件。如果我走不同的路线，则同一模板将用于不同的信息。这就是我在Page中的内容：

7.3-apache-stretch

这是Routes.js组件：

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

但是，当我进入localhost：3000 /时，它显示了没有任何内容的模板。如果用户转到/，我想重定向到/ home。

我尝试放置

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

像这样：

<Redirect>

，现在我转到的每个页面都重定向到/ home。有人知道如何使这项工作吗？

Answer 1

您需要使用from和exact属性。为了同时使用这两个属性，Redirect必须是Switch组件的子元素（请参阅文档here）：

<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

应该很简单：）

您只需要从prop添加到<Redirect>并将其放置为第一条路线：

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

如果用户在React上转到非公开网址，该如何重定向？

2 个答案: