Przekazywanie własnych właściwości do komponentu routera w react-router v4
Używam routera Reacta do tworzenia aplikacji wielostronicowej. Moim głównym komponentem jest <App/>
i renderuje wszystkie routingi do komponentów potomnych. Próbuję przekazać rekwizyty przez tę trasę, a bazując na niektórych badaniach , które zrobiłem, najczęstszym sposobem, aby komponenty potomne korzystały z rekwizytów przekazywanych w dół, jest obiekt this.props.route
, który dziedziczą. Jednak ten obiekt jest dla mnie nieokreślony. W mojej render()
funkcji w komponencie potomnym, I console.log(this.props)
I am zwracają obiekt, który wygląda jak to
{match: Object, location: Object, history: Object, staticContext: undefined}
Nie wygląda na rekwizyty, których się spodziewałam. Oto Mój kod w szczegółach.
Komponent nadrzędny (staram się przekazać słowo "cześć" jako rekwizyt zwany "test" we wszystkich moich komponentach podrzędnych):
import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom';
import Link from 'react-router';
import React from 'react';
import Home from './Home.jsx';
import Nav from './Nav.jsx';
import Progress from './Progress.jsx';
import Test from './Test.jsx';
export default class App extends React.Component {
constructor() {
super();
this._fetchPuzzle = this._fetchPuzzle.bind(this);
}
render() {
return (
<Router>
<div>
<Nav />
<Switch>
<Route path="/" exact test="hi" component={Home} />
<Route path="/progress" test="hi" component={Progress} />
<Route path="/test" test="hi" component={Test} />
<Route render={() => <p>Page not found!</p>} />
</Switch>
</div>
</Router>
);
}
}
Dziecko:
import React from 'react';
const CodeMirror = require('react-codemirror');
import { Link } from 'react-router-dom';
require('codemirror/mode/javascript/javascript')
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');
export default class Home extends React.Component {
constructor(props) {
super(props);
console.log(props)
}
render() {
const options = {
lineNumbers: true,
theme: 'abcdef'
// mode: this.state.mode
};
console.log(this.props)
return (
<div>
<h1>First page bro</h1>
<CodeMirror value='code lol' onChange={()=>'do something'} options={options} />
</div>);
}
}
Jestem całkiem nowy w reagowaniu, więc przepraszam, jeśli przegapiłem coś oczywistego.
Dzięki! 1 answers
Możesz przekazać właściwości komponentowi, używając właściwości render
do Route
i tym samym wprowadzając definicję komponentu. Według the DOCS:
Pozwala to na wygodne renderowanie i owijanie w linii bez / align = "left" / Zamiast nowego Reacta element stworzony dla Ciebie za pomocą
component
prop, możesz przekazać w funkcja, która zostanie wywołana, gdylocation
pasuje. The render prop / align = "left" / route props as the component render Propp
Więc możesz przekazać podpowiedź do komponentu jak
<Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />
I wtedy możesz uzyskać do niego dostęp jak
this.props.test
W Twoim Home
składniku
P. S. upewnij się również, że mijasz
{...props}
, aby domyślne właściwości routera, takie jaklocation, history, match etc
, są również przekazywane do komponentuHome
w przeciwnym razie jedynym rekwizytem, który zostaje do niego przekazany, jesttest
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-13 18:33:24