score:1

Accepted answer

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.

score:1

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.

score:1

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


Related Query

More Query from same tag