react-router: Three route rendering methods (component, render and child)

Introduction

In the last post, I talked about a tutorial on setting up react-router . If you haven't read the previous post, click here ! I want to add a few important topics about route rendering techniques.

Route rendering methods

HTML <Route>. .

<Route path="/">
  <Home />
</Route>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, <Home/> . — match, location history. . ! , , , .

1.  <Route component/>

. Route.

<Route path="/" component={Home} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

const Home = (props) => {
  console.log(props);
  return <div>Home</div>;
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. .

. ? , . render children

2. <Route render/>

, , . .

<Route
 path="/contact"
 render={(routeProps) => {
  return <Contact name={name} address={address} {...routeProps} />;
 }}
/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<Route render/>



HTML , , <Route component/>



.

<Route
 path="/contact"
 render={() => {
  return (
   <div>
    <h2>Contact</h2>
    <p>Name: {name}</p>
    <p>Adress: {address}</p>
   </div>
  );
 }}
/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

3.  <Route children />

, . , , , . , <switch>



.

<Route path="/" exact component={Home} />
<Route path="/about" render={() => <About></About>} />
<Route path="/portfolio" children={() => <Portfolio></Portfolio>} />
<Route path="/contact" children={() => <Contact></Contact>} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, /



, <Portfolio/>



<Contact/>



, . , , , .

, . , . , , "AHA". 

, , , , ! !

---

"React.js Developer". , , .