React <div id="root"></div> breaking the design, How can I avoid this?

user_8040747 0
Viewed 2797

I am implementing a template with reactjs, but the footer gets to break, it should be at the bottom.

The main <div id="root"></div> causing this. Can anyone know how to avoid it?

enter image description here

import React, { Component }  from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

/**
 * Import Custom Component
 */
import MainLayout from "./components/layout/MainLayout";
import ErrorPage from "./components/pages/errors/ErrorPage";

/**
 * Import the Pages Here
 */
import Home from "./components/pages/app/Home";

class App extends Component{

    constructor() {
      super();
      console.log("Application Started");
    }

    render(){
      return(
        <>
            <Router>
                <Switch>
                    <MainLayout path="/" exact component={Home} />
                    <Route component={ErrorPage}></Route>
                </Switch>
            </Router>
        </>
      );
    };
}

export default App;
reactjs css html javascript
3 Answers

It’s because you are not setting your paths correctly, the routing paths should look like this. Sorry I’m on mobile. Try this

import React, { Component }  from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react- 
router-dom;

<Switch>
<Route exact path=“/” component={MainLayout} />
<Route path=“*” component={ErrorPage} />
</Switch>

The * path serves as a catch all route for any path that is not expressed

Without having your full code it’s hard to tell. Another issue could be colliding divs inside MainLayout and ErrorPage.

Also if there is no content. I would re-iterate what the other answer says. Use css positioning

user_129651110

Just make the <body> tag your root, like so:

<body id="root">
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
user_127305740

Have you try this,

position: 'absolute',
bottom: 0,
user_130140150
Related