时间戳

首页 > 解决方案 > react-router-dom 多布局配置不显示路由指示的组件

reactjs - react-router-dom 多布局配置不显示路由指示的组件

问题描述

我正在尝试为我在 React 中创建的网页进行多布局配置。我已经测试了许多在网上找到的解决方案，但我无法让它们适用于我的情况。

我认为路由部分大部分是正确的，问题出在 Home.js 中，但我无法弄清楚它是什么。

我的反应代码如下：

应用程序.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import Home from './Home';
import { About } from './About';
import { Contact } from './Contact';
import { NoMatch } from './NoMatch';
import { NavigationBar } from './components/NavigationBar';
import { MainLayout } from './layouts/MainLayout';

const App = () => {
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <NavigationBar />
          <AppRoute exact path="/" component={Home} layout={MainLayout} />
          <AppRoute path="/about" component={About} layout={MainLayout} />
          <AppRoute path="/contact" component={Contact} layout={MainLayout} />
          <AppRoute component={NoMatch} layout={MainLayout} />
        </Switch>
      </Router>
    </React.Fragment>
  )
};

const AppRoute = ({component: Component, layout: Layout, ...rest}) => (
    <Route {...rest} render={props => (
      <Layout>
        <Component {...props} />
      </Layout>
    )} />
)

export default App;

唯一被渲染/返回的东西（我无法真正理解两者之间的区别——这就是我在标题中称它为“显示”的原因）是 .

我要显示的测试页面是 Home.js

主页.js

import React, { Component } from 'react';

import { Post } from './components/Post';
import { CarouselShow } from './components/Carousel';

class Home extends Component{
    render(){
        return(
            <React.Fragment>
                <CarouselShow />
                <Post />
            </React.Fragment> 
        )
    }
}

export default Home;

因为我读过一些在线教程，我把 Home 变成了课堂。我真的很感激——除了解决方案之外——有人可以告诉我类、常量和函数之间的区别。

谢谢你。

编辑：我忘记了 - 其他路线不显示任何内容以及 Home.js。

标签： reactjsreact-router

解决方案

Switch应该只包含Route组件，将NavigationBar组件移出Switch

<Router>
   <NavigationBar />
   <Switch>
      <AppRoute exact path="/" component={Home} layout={MainLayout} />
      <AppRoute path="/about" component={About} layout={MainLayout} />
      <AppRoute path="/contact" component={Contact} layout={MainLayout} />
      <AppRoute component={NoMatch} layout={MainLayout} />
   </Switch>
</Router>

推荐阅读