Question

在使用Flask和Jinja2服务器端模板之后，我决定使用React将模板渲染移至Frontend。在这个阶段，我想全神贯注于重定向。

在下面的示例中，我有人单击指向给定端点的链接，但这需要事先完成任务。

后端

Menus.html

<li><a href="{{ url_for('cooking') }}";>Pasta</a>

当用户单击指向“ pasta”的链接时，我渲染了一些动画，当任务完成时，用户将被重定向到所需的端点，如下所示：

Cooking.html

<div class="dish"></div>
<p class="txt">Cooking your pasta...</p>

<script> window.location.replace('/pasta');
</script>

前端

现在我正在尝试使用React来重现它。到目前为止，我有：

在（简化）的 Menus.jsx 中：

   import Cooking from './Cooking.jsx';

   render(){
        return (
          <div>
           <Cooking/>
          </div>
        );       
      }
 }

在 Cooking.jsx 中：

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

const Cooking = (props) => (
     <div>
       <Link to="/cooking">Pasta</Link>
     </div>
  )
export default Cooking;

否，在完成/pasta之后，如何类似地将用户重定向（路由）到/cooking？

Answer 1

您可以使用this.props.history.push('/pasta')或this.props.history.replace('/pasta')，并且由于它只是简单的动画，因此可以添加setTimeout（）只是为了增加重定向之前的延迟。

您可以在以下位置阅读更多内容 https://reacttraining.com/react-router/web/api/history

Reactjs-重定向用户，直到任务完成

1 个答案: