using the Router component inside of a function react

Question

I have a react component called react-dropzone. It allows you to drag and drop files, which then invokes a function (usually you "do" something with the file, but you can have it invoke any function you please).

When a file is dropped, I want to route the client to 'page-redirect'. The following code has no errors, but does nothing.

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;

Any insight is greatly appreciated!

score 1 · Answer 1 · answered Dec 08 '18 at 12:34

You have to define your Route before navigating to it. Then you can use Link component or use history object to navigate to the Route.

So your component would look something like this:

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;

You can separate DragAnDrop and Parent as you want.

I appreciate you taking the time to answer this question. Your code returns an error of `Uncaught TypeError: Cannot read property 'push' of undefined`. The above was more what I was looking for, but thanks anyways :) — Hanley Soilsmith, Dec 08 '18 at 20:10

Vayam Jain · Answer 2 · 2018-12-09T10:48:48.133

The tag just defines what component will render for a particular route, it doesn't redirect. To redirect to a certain location you should use <Redirect> from 'react-router' and then conditionally render <Redirect to="/pages/page-redirect"/>.

Also, to accomplish this redirection you need to define this route( and /or any other route) using BrowserRouter as you've done( preferably in a base file like App.js.).

This is a great article about React-Router: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

While this will give you an insight about <Redirect>: https://medium.com/@anneeb/redirecting-in-react-4de5e517354a

Hope this helps. If you would like to have a sample code for your problem feel absolutely free to ask. But be sure to read the above articles and try yourself if you can. Thanks

Thank you for the lead. Unfortunately, both of the links are 404. I will check out the answers below. Be well :) — Hanley Soilsmith, Dec 08 '18 at 19:58

Bens Steves · Accepted Answer · 2018-12-09T16:26:39.907

Your code returns nothing because you are essentially defining a new route not going to it.

If you want to just open the redirect page in another tab, you can just insert the following after you log the files.

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

or you could do:

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

This assumes that you have already defined your route in your root js file, i.e. your index.js or App.js or even your routes directory (if your using one). If you haven't define your route first wherever you have your other routes defined.

Hope that helps...

Update

The href will not work the way I have it above in React. You should change that to:

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

If you received a "window.location.href is not a function" error that is why. Sorry about that. Hope that helps anyone that got an error.

Also, the .open will open in a new tab and the href will redirect to that path.

Thank you, this solution is exactly what I was looking for. – Hanley Soilsmith Dec 08 '18 at 20:06 — Hanley Soilsmith, Dec 08 '18 at 20:06

using the Router component inside of a function react

3 Answers3