Как стилизовать каждый маршрут React самостоятельно?

Question

Я новичок в React и React Router, и у меня возникли некоторые проблемы с оформлением маршрутов. Так что в основном у меня есть 2 маршрута: главная страница и страница администратора. Все, что я хочу сделать, это стилизовать тело так, чтобы на странице администратора все было по центру. Проблема в том, что каждый раз, когда я стилизирую тело, все стили переходят и на главную страницу. Так как я могу исправить эту проблему?

Answer 1

Вы можете применить стиль к вашему app.js файлу, в котором реализовано BrowserRouter. Вот что вы можете сделать. Создайте свою Home/Main страницу как:

import React from "react";

const Home = () => {
  return <div style={{textAlign: "center" }}>Home</div>
}

export default Home;

Создайте свою Admin страницу как:

import React from "react";

const Admin = () => {
  return <div>Admin</div>
}

export default Admin;

И, наконец, создайте файл app.js как:

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Admin from "./Admin";
import Admin from "./Home";

const App = () => {
  return <BrowserRouter>
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route path="/" exact component={Home} />
      </Switch>
    </BrowserRouter>
}

export default App;

Таким образом, содержимое только вашей страницы Home выравнивается по центру. Надеюсь, это поможет вам.