no message

chenxuan1/src/App.js

@@ -15,6 +15,7 @@ class App extends Component{
       <div className='mainContainer'>
         <div className='nav'>
               <NavLink  to='/jsx' activeclassname='active'  children="jsx语法"></NavLink>
+              <NavLink  to='/fn' activeclassname='active'  children="函数式组件"></NavLink>
               <NavLink to='/ref1'>ref-字符串</NavLink>
               <NavLink to='/ref2'>ref-内联函数</NavLink>
               <NavLink to='/ref3'>ref-函数</NavLink>

chenxuan1/src/pages/fn.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Hehe(){
+    return (
+        <div>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+            <h1>函数式组件</h1>
+        </div>
+    )
+}
+class Fn extends React.Component{
+    render(){
+       return (
+        <Hehe/>
+       )
+    }
+}
+export default Fn;

chenxuan1/src/router/index.jsx

@@ -1,4 +1,5 @@
 import Jsx from '../pages/jsx'
+import Fn from '../pages/fn'
 import Ref1 from "../pages/ref1"
 import Ref2 from "../pages/ref2"
 import Ref3 from "../pages/ref3"
@@ -11,6 +12,10 @@ const routes = [
       path: "/jsx",
       component: Jsx
     },
+    {
+      path: "/fn",
+      component: Fn
+    },
     {
       path: "/life",
       component:Life