Блог

Я хочу создать отдельные контейнеры для всех моих компонентов react. На данный момент App.js выглядит это так:

 import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';
import {Switch, Route} from "react-router-dom";
import routesConstants from "./config/routesConstants";
import ContainerBlock from "./components/login-and-register/container/ContainerBlock";
import DashboardContainer from "./components/dashboard/container/DashboardContainer";

function App() {
    return (
        <Switch>
            <Route path={routesConstants.root} component={ContainerBlock}/>
            <Route path="/dashboard" component={DashboardContainer} />
        </Switch>
    );
}

export default App;
 

Но я хочу, чтобы маршрутизатор react перенаправлял пользователя из / в мой контейнер, поэтому я сделал это в своем контейнерном блоке:

 import React from "react";
import LoginPage from "../login-page/LoginPage";
import RegisterPage from "../register-page/RegisterPage";
import RootPage from "../root-page/RootPage";
import {Switch, Route, Redirect} from "react-router-dom"
import routesConstants from "../../../config/routesConstants";

const ContainerBlock = () => {
    return (
        <div className="container-block">
            <Switch>
                <Redirect exact from={routesConstants.root} to={routesConstants.welcome_page} />
                <Route path={routesConstants.welcome_page} component={RootPage} />
                <Route path={routesConstants.user.LOGIN} component={LoginPage} />
                <Route path={routesConstants.user.REGISTER} component={RegisterPage} />
            </Switch>
        </div>
    )
}

export default ContainerBlock
 

И есть три компонента, и перенаправление между этими тремя работает нормально, но когда я пытаюсь получить доступ /панель мониторинга со страницы входа или страницы регистрации — ничего не происходит, но если я перемещаю компонент панели мониторинга в переключатель контейнерных блоков — это работает. Я новичок в реагировании и реагирую маршрутизатором. Как я могу решить эту проблему? Может быть, есть другой способ создать приложение react

Редактировать:

Мой index.js файл:

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import store from "./store/index";
import {BrowserRouter as Router} from "react-router-dom";

ReactDOM.render(
    <Provider store={store}>
        <React.StrictMode>
            <Router>
                <App/>
            </Router>
        </React.StrictMode>
    </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
 

Мой файл routesConstants:

 const routesConstants = {
    root: '/',
    welcome_page: '/welcome',
    user: {
        LOGIN: '/login',
        REGISTER: '/register',
    },
    dashboard: {
        INDEX: '/dashboard'
    }
}

export default routesConstants
 

Ознакомьтесь с документацией для switch заявления

Он отображает только первый маршрут, который соответствует, и поскольку ваши маршруты всегда начинаются с "/" этого маршрута и exact не используются на этом маршруте, он всегда будет отображать ContainerBlock

Посмотри на свою App.js:

 import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';
import {Switch, Route} from "react-router-dom";
import routesConstants from "./config/routesConstants";
import ContainerBlock from "./components/login-and-register/container/ContainerBlock";
import DashboardContainer from "./components/dashboard/container/DashboardContainer";

function App() {
    return (
        // switch only renders the first match
        <Switch>
            {/* first match is always '/' path... it will always match */}
            <Route path={routesConstants.root} component={ContainerBlock}/>
            <Route path="/dashboard" component={DashboardContainer} />
        </Switch>
    );
}

export default App;
 

Попробуйте добавить exact свой первый маршрут в App.js:

 import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';
import {Switch, Route} from "react-router-dom";
import routesConstants from "./config/routesConstants";
import ContainerBlock from "./components/login-and-register/container/ContainerBlock";
import DashboardContainer from "./components/dashboard/container/DashboardContainer";

function App() {
    return (
        <Switch>
            <Route path={routesConstants.root} exact component={ContainerBlock}/>
            <Route path="/dashboard" component={DashboardContainer} />
        </Switch>
    );
}

export default App;
 

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