Обязательно ли роутинг должен быть внутри app.js?

Question

[Alex_mersvg]

Читаю про роутинг в реакте, и везде примеры приведены внутри app.js. Но мне, например удобно было бы роутинг прописать внутри другого файла, на уровень вложенности ниже.
например: app.js выглядел бы так :

class App extends React.Component{
    render() {
        return(
            <div className="App">
                <Header state={this.props.state}/>
                <Content state={this.props.state}/>
               <Footer />
            </div>
        )
    }
}

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

Comments

[Вадим]

То о чём вы говорите называется layout.
Layout представляет собой базовый шаблон страницы, контент которого не зависит от текущего роута.
Роутинг можете помещать куда угодно как Вам нужно.

Answer 1

[Воващ]

нет, импортируй роутинг из другого места

render() {
        return(
            <div className="App">
                {routes}
               <Footer />
            </div>
        )
    }
}

вот мой плюшевый пример с авторизацией

import React from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import {useRoutes} from './routes';
import {useAuth} from './hooks/auth.hook'
import {AuthContext} from './context/AuthContext'
import 'bootswatch/dist/sketchy/bootstrap.min.css'


function App() {
  const {token, login, logout, userId} = useAuth()
  const isAuthenticated = !!token
  const routes = useRoutes(isAuthenticated)

  return (
  <AuthContext.Provider value={{token, login, logout, userId, isAuthenticated}}>
    <Router>
      <div className="App container">
        {routes}
      </div>
    </Router>
  </AuthContext.Provider>
  );
}

export default App;

import React from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import AdminPage from './pages/AdminPage'
import MainPage from './pages/MainPage'
import AuthPage from './pages/AuthPage'
import PostPage from './pages/PostPage'

export const useRoutes = isAuthenticated =>{
    if(isAuthenticated){
        return(
            <Switch>
                <Route path="/admin" exact>
                    <AdminPage/>
                </Route>    
                <Redirect to="/admin"/>
            </Switch>
        )
    }

    return(
        <Switch>
            <Route path="/" exact>
                <MainPage/>
            </Route>
            <Route path="/post/:id" exact>
                <PostPage/>
            </Route>
            <Route path="/login" exact>
                <AuthPage/>
            </Route>
            <Redirect to="/"/>
        </Switch>
    )
}

Answer 2

[Kirill Makarov]

Нет не обязательно, и как правило роуты вообще выносят в отдельную папку, и подключают уже в app