Soweit ich weiß <Route path="/" component={App} />
, gibt Will App
Routing-bezogene Requisiten wie location
und params
. Wenn meine App
Komponente viele verschachtelte untergeordnete Komponenten enthält, wie kann ich der untergeordneten Komponente Zugriff auf diese Requisiten gewähren, ohne:
- Requisiten aus App übergeben
- mit Fensterobjekt
- Erstellen von Routen für verschachtelte untergeordnete Komponenten
Ich dachte, ich this.context.router
hätte einige Informationen zu den Routen, aber es this.context.router
scheint nur einige Funktionen zu geben, um die Routen zu manipulieren.
javascript
reactjs
react-router
xiaofan2406
quelle
quelle
Antworten:
(Update) V5.1 & Hooks (erfordert Reaktion> = 16.8)
Sie können verwendet werden
useHistory
,useLocation
unduseRouteMatch
in der Komponente zu erhaltenmatch
,history
undlocation
.const Child = () => { const location = useLocation(); const history = useHistory(); const match = useRouteMatch("write-the-url-you-want-to-match-here"); return ( <div>{location.pathname}</div> ) } export default Child
(Update) V4 & V5
Sie können mit
withRouter
HOC einzuspritzen , ummatch
,history
undlocation
in Ihrer Komponente Requisiten.class Child extends React.Component { static propTypes = { match: PropTypes.object.isRequired, location: PropTypes.object.isRequired, history: PropTypes.object.isRequired } render() { const { match, location, history } = this.props return ( <div>{location.pathname}</div> ) } } export default withRouter(Child)
(Update) V3
Sie können mit
withRouter
HOC einzuspritzen , umrouter
,params
,location
,routes
in der Komponente Requisiten.class Child extends React.Component { render() { const { router, params, location, routes } = this.props return ( <div>{location.pathname}</div> ) } } export default withRouter(Child)
Ursprüngliche Antwort
Wenn Sie die Requisiten nicht verwenden möchten, können Sie den Kontext wie in der Dokumentation zu React Router beschrieben verwenden
Zuerst müssen Sie Ihr
childContextTypes
und einrichtengetChildContext
class App extends React.Component{ getChildContext() { return { location: this.props.location } } render() { return <Child/>; } } App.childContextTypes = { location: React.PropTypes.object }
In diesem Kontext können Sie dann auf das Standortobjekt in Ihren untergeordneten Komponenten zugreifen
class Child extends React.Component{ render() { return ( <div>{this.context.location.pathname}</div> ) } } Child.contextTypes = { location: React.PropTypes.object }
quelle
context.router
window.location.pathname
?window
Objekt existiert nicht, wenn der React-Code auf dem Server ausgeführt wird, z. B. um serverseitiges Routing zu implementieren.Wenn die oben genannte Lösung bei Ihnen nicht funktioniert hat, können Sie sie verwenden
import { withRouter } from 'react-router-dom';
Mit dieser Option können Sie Ihre untergeordnete Klasse exportieren als -
class MyApp extends Component{ // your code } export default withRouter(MyApp);
Und deine Klasse mit Router -
// your code <Router> ... <Route path="/myapp" component={MyApp} /> // or if you are sending additional fields <Route path="/myapp" component={() =><MyApp process={...} />} /> <Router>
quelle