react路由怎么重定向到单页-开发者知识库平台

react路由怎么重定向到单页

React

902

2024/2/9 11:35:32

栏目: 编程语言

在React中，可以通过使用<Redirect>组件或者编程式导航来实现路由重定向到单页。

使用<Redirect>组件：

import { Redirect } from 'react-router-dom';

function App() {
  return (
    <div>
      {/* 定义路由 */}
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        {/* 定义重定向 */}
        <Redirect to="/" />
      </Switch>
    </div>
  );
}

在上述示例中，如果用户访问除了/和/about之外的路径，将会被重定向到/。

使用编程式导航：

import { useHistory } from 'react-router-dom';

function App() {
  const history = useHistory();

  // 在需要重定向的地方调用以下代码
  history.push('/');

  return (
    <div>
      {/* 定义路由 */}
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

在上述示例中，通过调用history.push('/')方法，就可以将页面重定向到/。

无论采用哪种方式，重定向到单页都是通过定义路由并在特定条件下触发重定向来实现的。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

react路由怎么重定向到单页

最新知识库

相关标签