Доступ к state в многостраничном приложении?

Question

[usica]

В приложении есть 2 компонента, один выводит переменную, другой изменяет ее значение:

class Header extends React.Component {
	constructor() {super();}
    render() {return <div>{this.props.name}</div>}
}
class Catalog extends React.Component {
	constructor() {super();}
    render() {return <div onClick={this.props.changeName} >click</div>}
}
class App extends Component {
	constructor() {
        super();
        this.state = {
        	name:'test',
        }
        this.changeName = this.changeName.bind(this);
    }
    changeName(){
		this.state.name = 'new name';
        this.setState({name: this.state.name});
	}
	render() {
		return <div>
			<Header name={this.state.name} />
            <Catalog name={this.state.name} changeName={this.changeName} />
		</div>
	}
}

Компонент Catalog нужно выводить только на одной странице, делаю так https://webformyself.com/odnostranichnye-prilozhen...
render App теперь выглядит так:

return (
            <div>
                <Header name={this.state.name} />
                <Menu />
                <Content />
            </div>
        );

content:

const Content = () => {
  return (
    <Switch>
      <Route exact path="/" component={pageIndex} />
      <Route path="/cart" component={pageCart} />
    </Switch>
  )
}

Как на странице сделать вызов

<Catalog name={this.state.name} changeName={this.changeName} />

?

Прошу хотя бы намекнуть, куда копать.

Answer 1

[Егор Живагин]

Если его нужно выводить на главной странице добавьте вызов в pageIndex из вашего Content
Если на странице /cart , то в pageCart оттуда же

Или я не так понял вопрос?

Answer 2

[Robur]

передайте this.state.name в Content как свойство, а в нем уже передайте в catalog из props.

Answer 3

[usica]

Спасибо за ответы.
Напишу решение, вдруг кому-то пригодится:

app:
<Content name={this.state.name} changeName={this.changeName} /> //здесь как обычно

content:
const Content = (parameters) => {
  return (
    <Switch>
      <Route exact path="/" component={() => (
            <PageIndex  parameters={parameters}/> )}/>//вот как передавать инфу
      
      <Route path="/cart" component={() => (
            <PageCart  parameters={parameters}/> )}/>
    </Switch>
  )
}

PageIndex:
const PageIndex = (parameters) => {
	let p = parameters.parameters;
	console.log(p.name);//данные переданы
}

Как-то так.

Непонятно, почему в конце оказалось parameters.parameters, но с этим уже легче разобраться.