Содержимое исчезает после маршрутизации со страницы входа? Реакт Роутер Дом + Электрон - PullRequest
Новая
       4

Содержимое исчезает после маршрутизации со страницы входа? Реакт Роутер Дом + Электрон

0 голосов
/ 09 января 2020

Резюме

Я создаю электронное приложение с реагировать. В настоящее время у меня есть 2 основных маршрута - страница входа и панель инструментов. Приборная панель имеет 3 суб-маршрута, управляемых боковой панелью. 3 вспомогательных маршрута - дом, установка и настройки - отображаются в основной области содержимого рядом с боковой панелью. Этот подход прекрасно работает сам по себе. Проблема возникает, когда я в строке на странице входа. Мне удалось проложить маршрут от имени входа до области главной страницы, но при этом не удалось отобразить суб-маршруты.

Проблема

Когда я перехожу от входа в систему к панели инструментов, мой макет выглядит нормально. Как только я нажимаю на опцию на боковой панели, DOM становится пустым. Я передвигаюсь по своим маршрутам и дивам, но мне не так повезло. Вот код для моей настройки. Иногда я даже вижу флаг sh основного контента, который должен быть там до того, как он пропадет.

Еще одна вещь, которую я пробовал, - это изменить маршрутизатор точки входа, чтобы включить <Switch> над 2 маршруты. С этой настройкой я мог перейти от входа в систему, к панели инструментов, но щелкнув опцию боковой панели, я мог бы вернуться к входу в систему.

index. js - точка входа 

const routing = (
  <HashRouter>
      <Route exact path="" component={Auth}/>
      <Route exact path="/dashboard" component={Layout} />
  </HashRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Когда ввод от auth правильный, я запускаю это: 

if(this.state.loginResult){
            return(
                <Redirect to={'/dashboard'} />
            )

Макет. js - приборная панель. 

    render() {
        return (
        <HashRouter>
            <div>
                <Installer onRef={ref => (this.child = ref)}  />
                <div className={'sideBar'}>
                    <div className={'navSelect'}>
                        <NavLink to={'/home'}  activeClassName="navOptionActive" >
                            <div className={'navOption'} >
                                <HomeIcon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Home</h1>
                            </div>
                        </NavLink>

                         <NavLink to={'/test'}  activeClassName="navOptionActive">
                            <div className={'navOption'}>
                                <Brightness3Icon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Nightly</h1>
                            </div>
                        </NavLink>
                        <div className={'bottom'}>
                            <NavLink to={'/nothing'} exact activeClassName="navOptionActive">
                                <div className={'navOption'} id={'settings'}>
                                    <SettingsIcon 
                                    style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                    color: 'white', marginTop: 10, marginBottom: 0}}/>
                                    <h1>Settings</h1>
                                </div>
                            </NavLink>
                        </div>
                    </div>
                </div>

                {/*Main content area. This is where the content from the sidebar options will be displayed. */}
                <div className={'mainContent'} >
                    <Route path="/home">
                        <App />
                    </Route>
                    <Route path="/test">
                        <TestPage  install={this.install} />
                    </Route>
                </div>
            </div>
        </HashRouter>

Также обратите внимание, что у меня еще нет связанной страницы настроек, поэтому одна из навигационных ссылок ведет к / ничему.

1 Ответ

0 голосов
/ 09 января 2020

Удалите вложенный hashRouting из компонента Layout и добавьте Switch в верхний компонент.

index. js - точка входа 

const routing = (

  <HashRouter>
      <Switch>
          <Route exact path="" component={Auth}/>
          <Route exact path="/dashboard" component={Layout} />
      </Switch>
  </HashRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Layout. js - приборная панель. 

render() {
        return (
            <div>
                <Installer onRef={ref => (this.child = ref)}  />
                <div className={'sideBar'}>
                    <div className={'navSelect'}>
                        <NavLink to={'/home'}  activeClassName="navOptionActive" >
                            <div className={'navOption'} >
                                <HomeIcon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Home</h1>
                            </div>
                        </NavLink>

                         <NavLink to={'/test'}  activeClassName="navOptionActive">
                            <div className={'navOption'}>
                                <Brightness3Icon 
                                style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                color: 'white', marginTop: 10, marginBottom: 0}}/>
                                <h1>Nightly</h1>
                            </div>
                        </NavLink>
                        <div className={'bottom'}>
                            <NavLink to={'/nothing'} exact activeClassName="navOptionActive">
                                <div className={'navOption'} id={'settings'}>
                                    <SettingsIcon 
                                    style={{fontSize: 75, textAlign: 'center', alignSelf: 'center', 
                                    color: 'white', marginTop: 10, marginBottom: 0}}/>
                                    <h1>Settings</h1>
                                </div>
                            </NavLink>
                        </div>
                    </div>
                </div>

                {/*Main content area. This is where the content from the sidebar options will be displayed. */}
                <div className={'mainContent'} >
                    <Switch>
                        <Route path="/home">
                            <App />
                        </Route>
                        <Route path="/test">
                            <TestPage  install={this.install} />
                        </Route>
                     </Switch>
                </div>
            </div>

Вход в систему Альтернатива 

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";

const hist = createBrowserHistory();
const loggedRoutes = () => (
  <Switch>
    <Route path="/" component={SignIn} />
    <Route path="/admin" component={Admin} />
    <Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
  </Switch>
);
const routes = () => (
  <Switch>
    <Route path="/" component={SignIn} />
    <Route path="/login" component={Admin} />
    <Redirect from="/" to="/login" />
  </Switch>
);
ReactDOM.render(
  <Router history={hist}>
    {checkIfAuth? loggedRoutes():routes()}
  </Router>,
  document.getElementById("root")
);

Надеюсь, это поможет

...