在函数内使用 Router 组件 react

汉利·索尔史密斯

我有一个名为react-dropzone. 它允许你拖放文件,然后调用一个函数(通常你对文件“做”一些事情,但你可以让它调用任何你喜欢的函数)。

当文件被删除时,我想将客户端路由到“页面重定向”。以下代码没有错误,但什么也不做。

import React, { Component } from "react";
import Dropzone from "react-dropzone";
import { BrowserRouter as Router, Route } from "react-router-dom";
import PageRedirect from "./pages/page-redirect.jsx";

class DragAndDrop extends Component {

//function invoked by the Dropzone Component
handleOnDrop = files => {
      console.log(files);
      return (
        <Router>
          <Route exact path="/pages/page-redirect" component={PageRedirect} />
        </Router>
      );
    };

  render() {
    return (
      <div>
        <Dropzone onDrop={this.handleOnDrop}> Drop File Here </Dropzone>
      </div>
    );
  }
}
export default DragAndDrop;

任何见解都非常感谢!

本斯·史蒂文斯

您的代码不返回任何内容,因为您实际上是在定义一条不去的新路线。

如果您只想在另一个选项卡中打开重定向页面,您可以在记录文件后插入以下内容。

window.open("/pages/pages-redirect")

或者你可以这样做:

window.location.href("/pages/pages-redirect") //please ignore this and see below for the update

这假设你已经在你的根 js 文件中定义了你的路由,即你的 index.js 或 App.js 甚至你的路由目录(如果你使用一个)。如果您在定义其他路线的任何地方都没有先定义您的路线。

希望有帮助...

更新

href 不会像我上面在 React 中那样工作。您应该将其更改为:

window.location.href = "/pages/pages-redirect" 

如果您收到“window.location.href 不是函数”错误,这就是原因。对于那个很抱歉。希望能帮助任何遇到错误的人。

此外,.open将在新选项卡中打开,href并将重定向到该路径。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 React Router 嵌套组件

来自分类Dev

使用React Router组件进行重定向

来自分类Dev

使用React Router更改基于URL的组件

来自分类Dev

对React-Router组件使用多种布局

来自分类Dev

在组件内部使用React Router Link

来自分类Dev

无法使用React Router渲染组件

来自分类Dev

在React中使用react-router时组件消失

来自分类Dev

React.js-使用React Router更改URL,但组件不变

来自分类Dev

无法使用React Router和React Bootstrap渲染组件

来自分类Dev

使用 react-router 3 在 React 中的组件内重定向

来自分类Dev

使用React Router,如何使用路由配置传递组件道具?

来自分类Dev

React Router不渲染组件

来自分类Dev

React Router未显示组件

来自分类Dev

如何使用react-router渲染嵌套组件

来自分类Dev

在React Router中为不同的路由使用相同的组件

来自分类Dev

使用React Router时无法访问App组件

来自分类Dev

如何使用React Router替换render方法中的组件?

来自分类Dev

用户登录后如何使用React Router渲染不同的组件

来自分类Dev

使用React Router重定向后重新渲染组件

来自分类Dev

如何使用react-router在组件中保存表单状态

来自分类Dev

使用React Router仅显示一个组件

来自分类Dev

如何在React-Router的组件中使用参数?

来自分类Dev

使用React Router根据URL更改组件

来自分类Dev

如何使用react-router根据路线渲染容器/组件?

来自分类Dev

如何使用 react-router 4 导航嵌套组件

来自分类Dev

使用 React Router 渲染组件和 Redux 崩溃

来自分类Dev

在 React-Router 中动态使用 Link 组件

来自分类Dev

使用 React Router 4 对组件内的 url 更改做出反应?

来自分类Dev

如何使用React Router从子组件到父组件进行通信

Related 相关文章

热门标签

归档