score:1
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
Source: stackoverflow.com
Related Query
- using the Router component inside of a function react
- React router v4.2.2: using a string instead of function inside component prop of Route results in error
- loop through multiple objects inside the first array from JSON data displaying two arrays with objects in React using FUNCTION COMPONENT
- Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component when using Create React App and Formik
- React Hooks Error: Hooks can only be called inside the body of a function component
- React Warning: Cannot update a component from inside the function body of a different component
- How to pass the match when using render in Route component from react router (v4)
- How do you pass data when using the navigate function in react router v6
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React Using useState/Hooks In HOC Causes Error "Hooks can only be called inside of the body of a function component"
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- React Hooks can only be called inside the body of a function component
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- Invalid hook call. Hooks can only be called inside of the body of a function component using react-apollo
- I got an error for using React.useRef inside a react function component
- Using the same component for different Routes with React Router
- React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- Anchor navigation using the <a> tag inside a react component
- How does React Context work by using a function inside of a component
- React Router "Link to" does not load new data when called from inside the same component
- Why does the render function in react is called twice when using the component strategy?
- React doesn't have the same execution order when calling a component as a function rather than using it as a tag?
- react function component inside class component, is a valid component ? What is the difference?
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- React useHistory: Hooks can only be called inside the body of a function component
- how do i update state in react for updating the value of an object inside an array using array.map function
- react router not rendering the component when using redux
- React Router v6 : How to render multiple component inside and outside a div with the same path
More Query from same tag
- How to limit the input number to max of two decimals with Ant Design?
- React Testing Library - Cannot read property 'contents' of undefined] - value from redux
- Access environment variables from client
- Having trouble using Jest with external dependancies
- Pass interfaced object as props without explicitly specifying each property value
- How to send image to server with Blob type using Axios in React Native?
- Array.find function in REACT JS Cannot read property of undefined
- Could someone explain this code to me? Concerning conditionally disabling inputs
- Initialize firebase app in react js shows error
- Unable to successfully loop through a redux store after a dispatch function
- How to use PrimeReact's Button component?
- How to add a default loading bar to all global state changes in react-router (redux)?
- Change Grid item column order on small screens
- Type 'RefObject<R>' is not assignable to type 'string | ((instance: typeof Room_T | null) => void) | RefObject<typeof Room_T> | null | undefined'
- React pass props from multiple arrays in state
- Form Validation in reactJS
- How can non-normalized data cause problems in react redux?
- setState in React: How to create a variable the value for which is dependent on another variable's value
- Components Not Re-Rendering when Action is Dispatched and State Updates
- Object order changes after reducer updates the state
- gerivedStateFromProps doesn't trigger but componentWillReceiveProps did
- React.JS: API called with stale value
- How to trigger modal/popup on page first load - React
- reactjs: how to show nav items based on backend permissions
- ReactJs update state from axios api data
- Why is the old reference still being used while using useRef?
- How to add class to li tag in react-slick
- RTK Query: Accessing cached data outside of a react component
- Not able to perform join in TypeScript
- Modify pseoduclass to either of two options based on class name