ReactJS - Passer des accessoires avec le composant Redirect

Question

Comment transmettre les accessoires avec le Redirect sans les avoir exposés dans l'url?

Comme ça <Redirect to="/order?id=123 />" ? J'utilise react-router-dom .

Answer 1

Vous devez d'abord passer les accessoires dans Route où vous avez défini dans votre App.js

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

puis dans votre premier composant

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

puis dans votre NewTestComp redirigé, vous pouvez l'utiliser où vous voulez comme ça

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

Answer 2

Vous pouvez utiliser l'état de l'historique du navigateur comme ceci:

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

Ensuite, vous pouvez y accéder via this.props.location.state.id

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

Answer 3

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

Ensuite, vous pouvez y accéder via this.props.location.state.id dans le composant souhaité

Answer 4

• Vous pouvez venir avec votre propre crochet dans le même but:

 import { createBrowserHistory } from "history";

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

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

export default  redirectToAccounting;

• et utilisez-le comme:

 
 import useRedirectToAccounting from  './redirectToAccounting


const handleOnClick = params => useRedirectToAccounting(params)

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

** cela peut être davantage remanié en fonction des besoins.