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?
reactjs
react-router
Mudit Tuli
quelle
quelle
<Route exact path="/details/:id" ><DetailsPage /></Route>
war nicht dasselbe wie<Route exact path="/details/:id" component={DetailsPage} />
. Ihr Code wurdeDetailsPage
auch dann gerendert , wenn Sie '/' besucht haben. Zweitens, als Sie geschrieben haben<DetailsPage foo={this.props}/>
,this
verwiesennull
. Deshalb hat es nicht funktioniert.Warning: [react-router] You cannot change <Router routes>; it will be ignored
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.
quelle
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
quelle
<Route path="/..." component={props => <DetailsPage id={props.match.params.id}/>}/>
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/
quelle
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> ) } }
quelle
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
DetailsPage
Komponentequelle
<Route exact path="/details/:id" > <DetailsPage globalStore={globalStore} /> </Route>
Das Übergeben des globalStore funktioniert jetzt nicht mehr.Eine andere Lösung besteht darin, einen Status- und Lebenszyklus-Hook in der gerouteten Komponente und eine Suchanweisung in der
to
Eigenschaft der<Link />
Komponente zu verwenden. Auf die Suchparameter kann später zugegriffen werden übernew 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> ) } }
quelle
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
quelle
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} />}
quelle
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
quelle