CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Michiel
Michiel

Reputation: 1853

ReactJS - Pass props with Redirect component

How should you pass props with the Redirect component without having them exposed in the url?

Like this <Redirect to="/order?id=123 />"? I'm using react-router-dom.

Upvotes: 75

Views: 131126

Answers (6)

Ashif Zafar
Ashif Zafar

Reputation: 637

  • You can come with your own hook for the same purpose :
import { createBrowserHistory } from "history";

const withRefresh = createBrowserHistory({ forceRefresh: true });
const ROOT_PATH = process.env.PUBLIC_URL || "/myapp";

const useRedirectToLocation = (params="1") => {
if(params){
withRefresh.push({
    pathname: `${ROOT_PATH}/create`,
    state: { id: `${params}` }
  });
}
} 

export default  useRedirectToLocation;
  • and use it like :

 import useRedirectToLocation from  './useRedirectToLocation


const handleOnClick = params => useRedirectToAccounting(params)

const RedirectorComponent = () => <a onClick={handleOnClick}>{"Label"}</a>

** this can be further refactored based on requirement.

Upvotes: 1

danrivative
danrivative

Reputation: 181

With Functional Components/Hooks, react-router-dom version 5.2.0 and passing down both Function and regular props:

Using @Barat Kumar answer, here you can also see how to pass and access functions as props with Redirect. Note that there is also a difference in how you access the property_id prop.

The Route is the same:

<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>

The Redirect:

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    state: { property_id: property_id }
  }}
/>

Accessing both props inside NewTestComp:

 useEffect(() => {
   console.log(props.history.location.testFunc);
   console.log(props.history.location.state.property_id);          
 }, []);

Note that "state" came from the use in Class Components. Here you can use any name you want and also pass regular props just like we did the function. So, departing a bit more from @Barat Kumar accepted answer, you can:

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    propetries: { property_id: property_id1, property_id2: property_id2},
    another_prop: "another_prop"
  }}
/>

And access those like so:

console.log(props.history.location.testFunc);
console.log(props.history.location.propetries.property_id1);
console.log(props.history.location.propetries.property_id2);
console.log(props.history.location.another_prop);

Upvotes: 5

Codemaker2015
Codemaker2015

Reputation: 15756

<Redirect to={{
    pathname: '/path',
    state: { id: '123' }
}} />

Then you can access it via this.props.location.state.id in the desired component

Upvotes: 1

Barat Kumar
Barat Kumar

Reputation: 636

You should first pass the props in Route where you have define in your App.js

<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>

then in your first Component

<Redirect
            to={{
            pathname: "/test/new",
            state: { property_id: property_id }
          }}
        />

and then in your Redirected NewTestComp you can use it where ever you want like this

componentDidMount(props){
console.log("property_id",this.props.location.state.property_id);}

Upvotes: 62

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

You can pass data with Redirect like this:

<Redirect to={{
            pathname: '/order',
            state: { id: '123' }
        }}
/>

and this is how you can access it:

this.props.location.state.id

The API docs explain how to pass state and other variables in Redirect / History prop.

Source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object

Upvotes: 118

Anas
Anas

Reputation: 5727

You can use browser history state like this:

<Redirect to={{
    pathname: '/order',
    state: { id: '123' }
}} />

Then you can access it via this.props.location.state.id

Source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object

Upvotes: 18

Related Questions