реагировать </div> ломая дизайн, как я могу избежать этого?

Question

Я реализую шаблон с reactjs, но нижний колонтитул ломается, он должен быть внизу.

Основной <div id="root"></div>, вызывающий это. Может кто-нибудь знает, как этого избежать?

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;

Answer 1

Это потому, что вы не устанавливаете свои пути правильно, пути маршрутизации должны выглядеть следующим образом. Извините, я на мобильном. Попробуйте это

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> 

Путь * служит для перехвата всех маршрутов для любого пути, который не выражен

Без вашего полного кода трудно сказать. Другой проблемой может быть столкновение div внутри MainLayout и ErrorPage.

Также, если нет контента. Я бы повторил то, что говорит другой ответ. Используйте css позиционирование

Answer 2

Вы пробовали это,

position: 'absolute',
bottom: 0,