BrowserRouter не работает в приложении create-nw-реагировать - PullRequest
Новая
       57

BrowserRouter не работает в приложении create-nw-реагировать

0 голосов
/ 17 октября 2018

Я создал приложение, используя create-nw-Reaction-app .Это в основном создает системное приложение, которое использует реагировать.

Итак, я создал маршрут '/', который рендерит определенный компонент. 

<Route 
    exact
    path='/'
    render={() => <Home />}
/>

Но компонент не был обработан.Итак, я проверил url , используя window.location.href, и это url , который я получил: 

chrome-extension://dkmbccbbedageiokbcmfaegjedpbegcf/index.html?

Is Routing дажевозможно с create-nw-react-app?

«реагировать-маршрутизатор»: «^ 4.3.1», «реагировать-маршрутизатор-дом»: «^ 4.3.1», 

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                {window.location.href}
                <Breadcrumb>
                    <BreadcrumbItem><a href='/home'>Home</a></BreadcrumbItem>
                    <BreadcrumbItem><a href='/courses'>Courses</a></BreadcrumbItem>
                </Breadcrumb>
                <BrowserRouter>
                    <Switch>
                        <Route 
                            exact
                            path='/home'
                            component={Home}
                        />
                        <Route 
                            exact
                            path='/courses'
                            component={CourseList}
                        />
                    </Switch>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

Только Breadcrumb рендерится при запуске.Затем, щелкнув любую из этих ссылок, выведите «Ваш файл не найден» в качестве вывода.

1 Ответ

0 голосов
/ 17 октября 2018

Возможна ли даже маршрутизация с помощью create-nw-реакции-приложения?

Маршрутизация зависит не от конфигурации этого проекта, а от использования React-Router библиотека и правильная конфигурация и настройка библиотеки.По сути, вы можете добавить React-Router в любой проект React, включая React Native.

Если вы используете сервер для обработки запросов приложения, например, в стеке MERN, или с помощью узла / экспресс-сервера, у вас будетустановить некоторые дополнительные настройки и настройки (на сервере) для правильной обработки маршрутизации.Поскольку это не так, я продолжу рассмотрение клиентской части.

Смена рендеринга для компонента

Не используйте функцию render из Route, но вместо этого используйте опору component, чтобы задать компонент, который будет отображаться в маршруте.

Посмотрите на этот вопрос в SO .

ИспользуйтеМаршрут, подобный следующему: 

<Route exact path="/" component={Home} />

Это базовый вариант использования маршрута и самый простой способ маршрутизации.

Switch Routing

Рассмотрите возможность использования Switch внутри BrowserRouter, если вы собираетесь использовать несколько маршрутов.

С Документы :

<Switch>

Визуализациипервый дочерний элемент <Route> или <Redirect>, который соответствует местоположению.

Чем он отличается от простого использования набора <Route> s?

<Switch> уникальным в том смысле, что оноказывает маршрут исключительно.Напротив, каждый <Route>, который соответствует местоположению, визуализируется включительно.

Поэтому, если у вас есть несколько маршрутов, вы можете использовать Switch как: 

import React, {Component} from 'react'
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom'
import Home from './Home'

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                <BrowserRouter>
                    <React.Fragment>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/about" component={About}/>
                            <Route path="/:user" component={User}/>
                            <Route component={NoMatch}/>
                        </Switch>
                    </React.Fragment>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

Некоторые учебные пособияи примеры:

Посмотрите на это:

...