Реагировать на домашней странице маршрута и странице администратора - PullRequest
Новая
       54

Реагировать на домашней странице маршрута и странице администратора

1 голос
/ 02 апреля 2020

Я работаю над веб-приложением React для маршрутизации разных страниц. Использование React Router

Требование: Всего 2 основных родительских маршрута, а именно (Клиент и Администратор). Поэтому, когда пользователь нажимает, например, localhost: 3000, он должен по умолчанию использовать домашнюю страницу (Клиентский компонент) и localhost: 3000 / admin route (Страница администратора).

Проблема: Либо я могу только направить все дочерние компоненты клиента (или) администратора. Оба не работают должным образом.

В настоящее время что работает?

  • localhost: 3000 - Загрузка домашней страницы
  • localhost: 3000 / sale - Пустая страница (необходимо исправить)
  • localhost: 3000 / sale / product - Пустая страница (необходимо исправить)
  • localhost: 3000 / admin - Загрузка страницы администратора
  • localhost: 3000 / admin / all-products - страница загрузки списка продуктов
  • localhost: 3000 / admin / add-product - страница загрузки сведений о продукте

Файлы: Указатель. js

ReactDOM.render(
    <BrowserRouter basename='/'>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);

Приложение. js

class App extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Customer} />
                <Route path='/admin' component={Admin} />
            </Switch>
        );
    }
}

Заказчик. js

class Customer extends Component {
    render() {
        return (
            <div>
                <Header />
                <div className='container mainContent'>
                    <Breadcrumbs />
                    <Switch>
                        <Route path='/' component={Home} />
                        <Route path='/sale' component={ProductList} />
                        <Route path='/sale/product' component={ProductDetails} />
                    </Switch>
                </div>
                <Footer />
            </div>
        );
    }
}

Администратор. js

class Admin extends Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <ul className='sidebar-submenu '>
                        <li>
                            <NavLink to='/admin/all-products' activeClassName='active'>All Products</NavLink>
                        </li>
                        <li>
                            <NavLink to='/admin/add-product' activeClassName='active'>>Create Product</NavLink>
                        </li>
                    </ul>
                    <div className='col-md-10 admin-content'>
                        <Switch>
                            <Route path='/admin/all-products' component={ProductListView} />
                            <Route path='/admin/add-product' component={ProductListCreate} />
                        </Switch>
                    </div>
                </div>
            </div>
        );
    }
}

Ответы [ 2 ]

2 голосов
/ 02 апреля 2020
  1. Во-первых, пропустите go через это: 
localhost:3000/sale - Blank page (need to fix)
localhost:3000/sale/product - Blank page (need to fix)

Причина в Приложение. js файл, у вас есть exact prop объявлено в этой строке: 

<Route exact path='/' component={Customer} />

Что приводит к тому, что вложенные маршруты после /, например, /sale или /sale/product не работают.

Вы поняли, это уже? Почему маршрут /admin/all-products или /admin/add-product работает нормально? Поскольку в этой строке не объявлена ​​опора exact: 

<Route path='/admin' component={Admin} />

Поэтому, пожалуйста, удалите exact опору в Customer маршруте, чтобы он заработал!

Во-вторых, ИМО, вы должны отделить ваши Customer и Admin маршруты с самого начала. Под отдельно я имею в виду, что вам лучше правильно аутентифицировать свой рабочий процесс. Обратите внимание на следующее: рабочий процесс реакции маршрутизатора

A Customer не должен иметь права на просмотр маршрутов Admin.

Обновление 1 из ответа Хема:

Но / admin и его дочерние маршруты идут на пустую страницу.

Имейте в виду что вы используете Switch компонент внутри приложения. js. Как и обычный switch/case, он будет соответствовать самому первому пути (случай для нормального switch/case) сверху вниз.

Так что для вашего случая: 

<Switch>
 <Route path='/' component={Customer} /> // <- Have no exact here
 <Route path='/admin' component={Admin} />
</Switch>

Потому что очень первый путь в Switch равен /, поэтому он всегда идет к маршруту Customer независимо от того, И /admin - это вложенный маршрут /, поэтому он никогда не сможет достичь маршрута Admin.

Тогда, если добавить точное значение к <Route path='/' component={Home} />, можно переключиться на страницу /sale и То же самое для /sale/product

Да, как я уже говорил, потому что вы избавились от exact опоры на маршруте Customer в App. js. Оба /sale & /sale/product являются вложенными маршрутами /, оба ProductList & ProductDetails являются вложенными компонентами внутри Customer. Неважно, добавлен exact в маршрут Home или нет.

IMO, вам лучше очистить слой маршрутизации заранее:

  1. Приложение первого уровня: /
  2. Второй уровень Main (вложенные маршруты внутри приложения): / для Customer, /admin для Admin
  3. Страницы третьего уровня (вложенные маршруты внутри Main): /sale, /admin/all-products
  4. Вложенные страницы четвертого уровня (вложенные маршруты внутри страниц): /sale/product
0 голосов
/ 28 апреля 2020

Попробуйте это приложение. js

  class App extends Component {
    render() {
        return (
            <Switch>
                <Route path='/' component={Customer} />
                <Route path='/admin' component={Admin} />
            </Switch>
        );
    }
}

клиент. js

 class Customer extends Component {
render() {
    return (
     <BrowserRouter>
        <div>
            <Header />
            <div className='container mainContent'>
                <Breadcrumbs />
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/sale' component={ProductList} />
                    <Route exact path='/sale/product' component={ProductDetails} />
                </Switch>
            </div>
            <Footer />
        </div>
     </BrowserRouter>
    );
  }
}

admin. js

 class Admin extends Component {
    render() {
        return (
           <BrowserRouter>
            <div className='container-fluid'>
                <div className='row'>
                    <ul className='sidebar-submenu '>
                        <li>
                            <NavLink to='/admin/all-products' activeClassName='active'>All Products</NavLink>
                        </li>
                        <li>
                            <NavLink to='/admin/add-product' activeClassName='active'>>Create Product</NavLink>
                        </li>
                    </ul>
                    <div className='col-md-10 admin-content'>
                        <Switch>
                            <Route exact path='/admin/all-products' component={ProductListView} />
                            <Route exact path='/admin/add-product' component={ProductListCreate} />
                        </Switch>
                    </div>
                </div>
            </div>
           </BrowserRouter>
        );
    }
}

import {BrowserRouter } из'act-router-dom 'в приложении. js и в клиенте. js file

...