используя компонент Маршрутизатор внутри функции реагировать - PullRequest
Новая
       7

используя компонент Маршрутизатор внутри функции реагировать

0 голосов
/ 08 декабря 2018

У меня есть реактивный компонент под названием 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;

Любое понимание очень ценится!

Ответы [ 3 ]

0 голосов
/ 08 декабря 2018

Тег просто определяет, какой компонент будет отображаться для определенного маршрута, он не перенаправляет.Чтобы перенаправить в определенное место, вы должны использовать <Redirect> из «act-router », а затем условно отрендерить <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

Надеюсь, это поможет.Если вы хотите получить образец кода для вашей проблемы, не стесняйтесь спрашивать.Но обязательно прочитайте вышеупомянутые статьи и попробуйте сами, если можете.Спасибо

0 голосов
/ 08 декабря 2018

Ваш код ничего не возвращает, потому что вы, по сути, определяете новый маршрут, который не идет к нему.

Если вы хотите просто открыть страницу перенаправления в другой вкладке, вы можете просто вставить следующее после регистрации файлов.

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 function», именно поэтому.Извини за это.Надеюсь, это поможет любому, кто получил ошибку.

Кроме того, .open откроется в новой вкладке и href перенаправит на этот путь.

0 голосов
/ 08 декабря 2018

Вы должны определить свой 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 как хотите.

...