Используя компонент 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.info(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
Вы должны определить свой 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.info(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, как хотите.
Тег просто определяет, какой компонент будет отображать для определенного маршрута, он не перенаправляет. Для перенаправления в определенное место вы должны использовать <Redirect> из «response-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
Надеюсь это поможет. Если вы хотите получить образец кода для решения вашей проблемы, не стесняйтесь спрашивать. Но обязательно прочтите вышеперечисленные статьи и попробуйте себя, если сможете. Спасибо
Спасибо за инициативу. К сожалению, обе ссылки - 404. Я проверю ответы ниже. Всего хорошего :)
Извини за это. Обновил ответ.
Ваш код ничего не возвращает, потому что вы, по сути, определение новый маршрут, к которому не идете.
Если вы хотите просто открыть страницу перенаправления на другой вкладке, вы можете просто вставить следующее после регистрации файлов.
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 будет перенаправлять на этот путь.
Спасибо, это решение именно то, что я искал.
нп счастливого кодирования :)
Спасибо, что нашли время ответить на этот вопрос. Ваш код возвращает ошибку
Uncaught TypeError: Cannot read property 'push' of undefined. Выше было больше того, что я искал, но в любом случае спасибо :)