CODEWITHSUNDEEP
reactjsreact-router
Burak
Burak

Reputation: 83

react-router-dom multiple layout configuration doesn't display components indicated by route

I am trying to make multi-layout configuration for my web page created in React. I've tested many solutions found online, but I can't make them work in my case.

I think that routing part is mostly correct and that the problem is in the Home.js, but I can't figure out what it is.

My React code is as below:

App.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;

The only thing that is rendered/returned (I can't really get the difference between both - that's why I called it "displayed" in the title) is .

The page I am trying to display as for a test is Home.js

Home.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;

I've made Home into class, becase of some online tutorials I've read. I would really appreciate - that additionally to the solution - somebody could tell me the difference between class, const and function.

Thank you.

EDIT: I forget - other routes don't display anything as well as Home.js.

Upvotes: 1

Views: 56

Answers (1)

Yousaf
Yousaf

Reputation: 29282

Switch should only contain Route components, move NavigationBar component out of the 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>

Upvotes: 1

Related Questions