Как сделать компоненты вact-router-dom с файлом bundle.js? - PullRequest
Новая
       6

Как сделать компоненты вact-router-dom с файлом bundle.js?

0 голосов
/ 17 февраля 2019

Я создал веб-приложение и использую response-router-dom для навигации в приложении.Все работает нормально, когда я запускаю приложение с помощью webpack-dev-server, и теперь пришло время развернуть это приложение на моем сервере, поэтому я создал пакетный файл этого приложения с помощью команды webpack, но response-router-dom не отображает никакой компонентс файлом bundle.js я либо добавляю переключатель, либо нет.

Еще одна вещь, когда я нажимаю на URL или обновляю страницу, я получаю сообщение об ошибке «webpage not found» даже в webpack-dev-server.Я хочу, чтобы мое приложение работало с URL-адресами, а не только с Link and Push.Вот мой код 

import {        
    Router,
    Route,
    Switch
} from "react-router-dom";
import { Provider } from "react-redux";
import history from "./config/History";

import store from "./store";

const router = (
    <Provider store={store}>
        <Router history={history}>
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route path="/login" component={Login} />
                    <Route path="/create/questions" component={CreateQuestion} />
                    <Route path="/create/quiz" component={CreateQuiz} />
                </Switch>
            </div>
        </Router>
    </Provider>
)

ReactDOM.render(router, document.getElementById("root"));

1 Ответ

0 голосов
/ 18 февраля 2019

Я исправил эту проблему с помощью HashRouter.У маршрутизатора есть некоторые проблемы с безопасностью, поэтому вы должны запустить его на сервере, например, на экспресс-сервере, если вы хотите его использовать.

Вот мой обновленный код.Для истории я использую функцию CreateHashHistory из истории. 

import {
    HashRouter,
    Route,
    Switch
} from "react-router-dom";

<Provider store={store}>
    <HashRouter history={history}>
        <div>
            <Header />
            <Switch>
                <Route exact path="/" component={Login} />
                <Route exact  path="/login" component={Login} />
                <Route exact  path="/create/questions" component={CreateQuestion} />
                <Route exact  path="/create/quiz" component={CreateQuiz} />
            </Switch>
        </div>
    </HashRouter>
</Provider>
...