包装组件在不同的页面上显示不同的导航

Question

我正在努力使我的页面灵活地根据我所在的页面显示不同的导航栏。当我使用下面的代码运行页面时，它会显示不同的Nav，但实际的RouteComponent没有显示路由组件的内容，例如FrontpageRoute、BookRoute。

这是我的App.js:

import React from 'react';
import {BrowserRouter as Router, Switch} from 'react-router-dom';
import './Mystyles.scss';
//Routes
import DynamicLayout from './layout/DynamicLayout'
import FrontpageRoute from './routes/FrontpageRoute';
import BookRoute from './routes/BookRoute';
function App() {
return (
<Router>
<div className="App">        
<Switch>
<DynamicLayout 
exact 
path="/" 
component={FrontpageRoute} 
/>
<DynamicLayout 
exact 
path="/book" 
component={BookRoute} 
layout="SUB_NAV" 
/>
</Switch>        
</div>
</Router>    
);
}
export default App;

这是我的DynamicLayoutRoute.js:

import React from 'react';
import {BrowserRouter as Route} from 'react-router-dom';
import Header from './../components/Header';
import MainNavigation from '../components/MainNavigation';
const DynamicLayout = props => {
const { component: RoutedComponent, layout, ...rest } = props;

const actualRouteComponent = (
<Route
{...rest}
render={props => (
<RoutedComponent {...props} />
)}
/>
);
switch (layout) {
case 'MAIN_NAV': {
return (
<div>
<MainNavigation />
<Header />
{actualRouteComponent}
</div>
)
}
case 'SUB_NAV': {
return (
<div>
<MainNavigation />
<h2>Sub Nav</h2>
<Header />
{actualRouteComponent}
</div>
)
}
default: {
return (
<div>
<MainNavigation />
<Header />
{actualRouteComponent}
</div>
)
}
}
};    
export default DynamicLayout;

这是我的MainNavigation.js:

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
class MainNavigation extends Component {
render() {
return (
<nav className="main-navigation"> 
<div className="main-navigation--content"> 
<div className="mobil-nav">
<span>Burger</span>
</div>

<div className="link-list">       
<NavLink exact to="/">Frontpage</NavLink>
<NavLink exact to="/book">Book</NavLink>   
</div>   
<div className="social">
<span>Instagram</span>
</div>        

</div>
</nav>
)
}
}
export default MainNavigation

有人能告诉我怎么了吗？

Answer 1

我看到在DynamicLayoutRoute组件中，您正在以this.props的身份访问道具。this在功能组件中未定义。

像这样的访问道具-

const DynamicLayoutRoute = props => {
const { component: RoutedComponent, layout, ...rest } = props;
...
}