如何将变量传递到子组件中，以便它们与React Router一起使用？

Question

I am having issues setting up a basic React application that allows React Router to be used across components. When I have the below code snippets in App.js it all seems to work fine, however, I'm having trouble passing information down to child components.

I've tried passing the JSX objects into the component like so:

<Main component={Home} />

But this hasn't seemed to work when trying to access the properties within the Main child component.

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;

I expected that I would be able to use the navigation created to load the component content in as it does when not in separate components. Not sure where I've gone wrong? Thanks

Answer 1

I would not have done anything like this at all. I think that your Main component is redundant.

This will lead to put every single one of your components through this component.

The router is a component in itself, so why not something like the following:

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>

    )
  }
}