@Alex_mersvg

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

Читаю про роутинг в реакте, и везде примеры приведены внутри 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>
        )
    }
}

И уже внутри компонента "Контент" разместить маршрутизацию моего приложения. Это как бы полностью рабочий вариант, но задаюсь вопросом принято или допускается ли такая реализации маршрутизации ?
  • Вопрос задан
  • 105 просмотров
Решения вопроса 2
@V0vash
нет, импортируй роутинг из другого места
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>
    )
}
Ответ написан
Комментировать
kirbi1996
@kirbi1996
Нет не обязательно, и как правило роуты вообще выносят в отдельную папку, и подключают уже в app
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы