React Router Pass Param an Component

const rootEl = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);

Ich versuche, auf die ID in der DetailsPage-Komponente zuzugreifen, aber es ist nicht zugänglich. Ich habe es versucht

<DetailsPage foo={this.props}/>

Parameter an die DetailsPage zu übergeben, aber vergebens.

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}

Haben Sie also eine Idee, wie Sie die ID an die Detailseite weitergeben können?

Wenn Sie Requisiten an eine Komponente innerhalb einer Route übergeben möchten, verwenden Sie am einfachsten Folgendes render:

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

Sie können auf die Requisiten im folgenden zugreifen DetailPage:

this.props.match
this.props.globalStore

Das {...props}wird benötigt, um die Requisiten der Originalroute zu passieren, sonst gelangen Sie nur this.props.globalStorein die DetailPage.

Ich habe dies verwendet, um auf die ID in meiner Komponente zuzugreifen:

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

Und in der Detailkomponente:

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

Dadurch wird jede ID in einem h2 gerendert, hoffentlich hilft das jemandem.

Verwenden Sie die Rendermethode:

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

Und Sie sollten in der Lage sein, auf die ID zuzugreifen, indem Sie:

this.props.id

Innerhalb der DetailsPage-Komponente

Seit React-Router v5.1 mit Hooks:

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
}

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

Zusätzlich zu Alexander Lunas Antwort ... Wenn Sie mehr als ein Argument hinzufügen möchten, verwenden Sie einfach:

<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>
    )
  }
}

Verwenden Sie die Komponente:

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

Und Sie sollten in der Lage sein, auf Folgendes zuzugreifen id:

this.props.match.params.id

Innerhalb der DetailsPageKomponente

Eine andere Lösung besteht darin, einen Status- und Lebenszyklus-Hook in der gerouteten Komponente und eine Suchanweisung in der toEigenschaft der <Link />Komponente zu verwenden. Auf die Suchparameter kann später zugegriffen werden über 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>
        )
      }
    }

Hier ist eine Typoskript-Version. arbeitet weiter"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>
    );
};

und Komponente

export class ProblemPage extends React.Component<ProblemRouteTokens> {

    public render(): JSX.Element {
        return <div>{this.props.problemId}</div>;
    }
}

wo ProblemRouteTokens

Exportschnittstelle ProblemRouteTokens {problemId: string; }}

Wenn Sie eine Klassenkomponente verwenden, verwenden Sie höchstwahrscheinlich den GSerjo-Vorschlag. Übergeben Sie die Parameter über <Route>Requisiten an Ihre Zielkomponente:

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

Versuche dies.

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

Auf der Detailseite versuchen Sie dies ...

this.props.id