Как передать переменные в дочерний компонент, чтобы они работали с React Router?

Question

У меня проблемы с настройкой базового приложения React, которое позволяет использовать React Router для всех компонентов.Когда у меня есть приведенные ниже фрагменты кода в App.js, кажется, что все работает нормально, но у меня возникают проблемы при передаче информации дочерним компонентам.

Я пытался передать объекты JSX в компонент следующим образом:

<Main component={Home} />

Но, похоже, это не сработало при попытке доступа к свойствам внутри дочернего компонента Main.

App.js

import React from 'react';
import './App.css';
import { NavLink, Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation.js';
import Main from './components/main.js';

const App = () => (
  <div className='app'>
    <h1>Portfolio Website</h1>
    <Navigation />
    <Main home={Home} about={About} />
   </div>
);


const Home = () => (
  <div className='home'>
    <h1>Welcome to my portfolio website</h1>
    <p> Feel free to browse around and learn more about me.</p>
  </div>
);

const About = () => (
  <div className='about'>
    <h1>About Me</h1>
  </div>
);


export default App;

Main.js

import React, { Component } from 'react';
import { NavLink, Switch, Route } from 'react-router-dom';

const Main = () => (
    <Switch>
        <Route exact path='/' component={this.props.Home}></Route>
        <Route exact path='/about' component={this.props.About}></Route>
    </Switch>
);

export default Main;

Navigation.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <ul>
      <li><NavLink exact activeClassName="current" to='/'>Home</NavLink></li>
      <li><NavLink exact activeClassName="current" to='/about'>About</NavLink></li>
    </ul>
  </nav>
);

export default Navigation;

Я ожидал, что смогу использоватьнавигация, созданная для загрузки содержимого компонента, как это происходит, когда не в отдельных компонентах.Не уверен, где я ошибся?Спасибо

Answer 1

Я бы не сделал ничего подобного вообще.Я думаю, что ваш главный компонент является избыточным.

Это приведет к тому, что каждый из ваших компонентов будет проходить через этот компонент.

Маршрутизатор сам по себе является компонентом, так почему бы не сделать что-то вроде следующего:

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navigation from "./yournavigationcomponent"
import Home from "./home"
import About from "./about"

class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <div>
                <Navigation />
                <Switch>
                  <Route exact path='/' component={Home}/>
                  <Route path='/about' component={About}/>
                </Switch>
            </div>
        </BrowserRouter>

    )
  }
}