在函数内部使用 Router 组件做出反应

Question

我有一个名为 react-dropzone 的 React 组件。它允许你拖放文件，然后调用一个函数（通常你 "do" 文件的东西，但你可以让它调用你喜欢的任何函数）。

删除文件后，我想将客户端路由到 'page-redirect'。以下代码没有错误，但什么也没做。

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;

非常感谢任何见解！

Answer 1

您必须先定义 Route，然后才能导航到它。然后您可以使用 Link 组件或使用 history 对象导航到 Route.

所以你的组件看起来像这样：

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

const Parent = (props) => (
    <Router>
          <Route exact path="/pages/page-redirect" component={PageRedirect} />
          <Route exact path="/draganddrop" component={DragAndDrop} />
    </Router>
);


class DragAndDrop extends Component {

//function invoked by the Dropzone Component
handleOnDrop = files => {
      console.log(files);
      this.props.history.push("/pages/page-redirect");
    };

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

您可以根据需要将 DragAnDrop 和 Parent 分开。

Answer 2

该标记仅定义为特定路由呈现的组件，它不会重定向。要重定向到某个位置，您应该使用 'react-router' 中的 <Redirect>，然后有条件地呈现 <Redirect to="/pages/page-redirect"/>.

此外，要完成此重定向，您需要像您所做的那样使用 BrowserRouter 定义此路由（和/或任何其他路由）（最好在 App.js 等基本文件中）。

这是一篇关于 React-Router 的精彩文章：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

虽然这会让您深入了解 <Redirect>：https://medium.com/@anneeb/redirecting-in-react-4de5e517354a

希望这对您有所帮助。如果您想获得针对您的问题的示例代码，请随时询问。但一定要阅读上面的文章，如果可以的话，请自己尝试。谢谢

Answer 3

您的代码 returns 什么都没有，因为您本质上是在定义一条新路线，而不是它。

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

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 is not a function" 错误，这就是原因。对于那个很抱歉。希望能帮助任何遇到错误的人。

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

在函数内部使用 Router 组件做出反应

using the Router component inside of a function react

dropzone.js

reactjs

react-router