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

Question

我有一个称为react-dropzone的react组件。 它允许您拖放文件，然后调用一个函数（通常您对文件进行“处理”，但是您可以让它调用您喜欢的任何函数）。

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

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然后才能导航到该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

您的代码未返回任何内容，因为您本质上是在定义一条不去的新路线。

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

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将重定向到该路径。