React Router Pass Param to Component

Ik probeer toegang te krijgen tot de idin de DetailsPage-component, maar deze is niet toegankelijk. Ik heb geprobeerd

<DetailsPage foo={this.props}/>

om parameters door te geven aan de DetailsPage, maar tevergeefs.

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >
            </div>
            </div>
    );
    }
}

Dus enig idee hoe je de ID kunt doorgeven aan de DetailsPage ?

Antwoord 1, autoriteit 100%

Ik heb dit gebruikt om toegang te krijgen tot de ID in mijn component:

<Route path="/details/:id" component={DetailsPage}/>

En in de detailcomponent:

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

Hiermee wordt elke ID in een h2 weergegeven, in de hoop dat iemand er iets aan heeft.

Antwoord 2, autoriteit 90%

Als je rekwisieten wilt doorgeven aan een component binnen een route, is de eenvoudigste manier om de renderte gebruiken, zoals deze:

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

Je hebt toegang tot de rekwisieten op de DetailPagemet:

this.props.match
this.props.globalStore

De {...props}is nodig om de originele rekwisieten van de route te passeren, anders krijg je alleen this.props.globalStorebinnen de DetailPage.

Antwoord 3, autoriteit 39%

Sinds react-router v5.1 met hooks:

import { useParams } from 'react-router';
export default function DetailsPage() {
  const { id } = useParams();
}

Zie https://reacttraining.com/blog/react-router-v5- 1/

Antwoord 4, autoriteit 31%

Gebruik rendermethode:

<Route exact path="/details/:id" render={(props) => (
    <DetailsPage id={props.match.params.id}/>
)} />

En je zou toegang moeten hebben tot de id met:

this.props.id

In het onderdeel DetailsPage

Antwoord 5, autoriteit 11%

Naast het antwoord van Alexander Luna…
Als je meer dan één argument wilt toevoegen, gebruik dan:

<Route path="/details/:id/:title" component={DetailsPage}/>
export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h3>{this.props.match.params.title}</h3>
      </div>
    )
  }
}

Antwoord 6, autoriteit 9%

Gebruik de component:

<Route exact path="/details/:id" component={DetailsPage} />

En je zou toegang moeten hebben tot de idmet:

this.props.match.params.id

In het onderdeel DetailsPage

Antwoord 7, autoriteit 4%

Hier is een getypte versie. werkt op "react-router-dom": "^4.3.1"

export const AppRouter: React.StatelessComponent = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />} />
                <Route path="/" exact component={App} />
            </Switch>
        </BrowserRouter>
    );
};

en onderdeel

export class ProblemPage extends React.Component<ProblemRouteTokens> {
    public render(): JSX.Element {
        return <div>{this.props.problemId}</div>;
    }
}

waar ProblemRouteTokens

export interface ProblemRouteTokens {
probleem-ID: tekenreeks; }

Antwoord 8, autoriteit 3%

Een andere oplossing is om een ​​state en lifecycle hooks te gebruiken in de gerouteerde component en een zoekopdracht in de toeigenschap van de <Link />component. De zoekparameters zijn later toegankelijk via new URLSearchParams();

<Link 
  key={id} 
  to={{
    pathname: this.props.match.url + '/' + foo,
    search: '?foo=' + foo
  }} />
<Route path="/details/:foo" component={DetailsPage}/>
export default class DetailsPage extends Component {
    state = {
        foo: ''
    }
    componentDidMount () {
        this.parseQueryParams();
    }
    componentDidUpdate() {
        this.parseQueryParams();
    }
    parseQueryParams () {
        const query = new URLSearchParams(this.props.location.search);
        for (let param of query.entries()) {
            if (this.state.foo!== param[1]) {
                this.setState({foo: param[1]});
            }
        }
    }
      render() {
        return(
          <div>
            <h2>{this.state.foo}</h2>
          </div>
        )
      }
    }

Antwoord 9, autoriteit 2%

als je een klasse-component gebruikt, is de kans groot dat je GSerjo-suggestie gebruikt. Geef de parameters via <Route>props door aan uw doelcomponent:

exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />}

Antwoord 10, autoriteit 2%

Dit is voor react-router-dom v6 (ik raad ten zeerste aan om hiervoor functionele componenten te gebruiken)

Het is een beetje pijnlijk voor react-router-dom om de syntaxis en regels te blijven veranderen. Maar hier gaat niets.

Je kunt zowel useParamsals useSelectorgebruiken om dit op te lossen

import { useParams } from 'react-router';
import { useSelector } from 'react-redux';
const Component = () => {
const { id } = useParams();                              //returns the :id
const page = useSelector((state) => state.something[id]); //returns state of the page
return <div>Page Detail</div>;
}
export default Component;

MAAR het probleem blijft bestaan ​​wanneer je ook een actie-maker hebt en je deze wilt doorgeven als rekwisieten in de connect-functie

export const connect(mapStateToProps, mapDispatchToProps)(Component)

aangezien we useParamsgebruiken, wordt het niet doorgegeven aan mapStateToPropsdie we hebben gemaakt

const mapStateToProps = (state, ownProps) => {
console.log(ownProps)   //wont recognize :id
//hence
return {
  someReducers: state.someReducers[id] //would return an error: 'id' is not defined
 };
};

aan de andere kant kun je de functie connectniet helemaal negeren, aangezien je mapDispatchToPropsnodig hebt om met je component te werken.

De oplossing hiervoor is om zelf een Higher Order Component withRouter-functie te maken. Dit was een verouderde react-router-dom-helper.

//make this
import { useParams, useLocation, useNavigate } from 'react-router';
import { connect } from 'react-redux';
import { yourActionCreator } from '../actionCreator';
const withRouter = (Child) => {
return (props) => {
 const location = useLocation();
 const navigation = useNavigate();
 const params = useParams();
 return (
   <Child
   {...props}
   params={params}
   navigate={navigate}
   location={location}
   />
  );
 };
};
const Component = () => {
// your component...
return <div> Page Detail </div>
};
export mapStateToProps = (state, ownProps) => {
console.log(ownProps)     // would contain the :id params
return {
//something
 }
};
const mapDispatchToProps = {
yourActionCreator
}
export withRouter(connect(mapStateToProps, mapDispatchToProps)(Component));

Antwoord 11

probeer dit.

<Route exact path="/details/:id" render={(props)=>{return(
    <DetailsPage id={props.match.params.id}/>)
}} />

Probeer dit op de detailpagina…

this.props.id