Включите статическую папку / файлы HTML в приложение create-реагировать

Question

Я использую приложение create-Reaction-app с модулемact-router-dom для моего приложения React.У меня есть подпапка, содержащая статический HTML / CSS / JS, который я бы хотел отреагировать в приложении реагирования.Это может быть так просто, как показ роутера /static/index.html.

Я искал вокруг, и, похоже, нет однозначного ответа на вопрос, как это сделать с помощью create-реагировать-приложение.Любой совет приветствуется.

Answer 1

Чтобы использовать маршрутизацию в приложении реакции, вам необходимо выполнить следующие действия:

Настройка

1. Установить реакцию, открыв терминал / cmd и перейдя к текущим приложениям.каталог и введите следующую команду: npm i react-router-dom.Нажмите ввод и дайте ему установить.
2. Затем перейдите к файлу index.js и импортируйте BrowserRouter, добавив следующую строку в начале вашего кода: import { BrowserRouter } from 'react-router-dom'

3. Затем измените объект рендеринга, чтобы он выглядел следующим образом:

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

Что это делает,это в основном говорит реагировать, что App будет иметь поддержку маршрутизации.

Теперь перейдите к вашему app.jsx файлу и импортируйте следующее: import { Route, Switch } from 'react-router-dom';.(Я объясню, чем они все будут позже.)

Теперь, когда скрытые настройки настроены, мы можем начать добавлять маршруты или пути к нашему приложению.

Применить маршруты

1. Перейдите к файлу app.jsx и в части render вместо того, чтобы просто иметь там компоненты, давайте создадим маршрут.(Маршрут просто означает путь URL.)
2. Вы можете иметь components, которые всегда есть, независимо от того, какой путь URL.Чтобы сделать это, просто не используйте эти предметы в качестве маршрутов.Для получения дополнительной информации см. Пример ниже.
3. Чтобы создать маршрут, просто добавьте следующий код: <Route path="/myPath" component={myComponent} />
4. myComponent отобразится, когда пользователь перейдет к www.myWebsite.com/myPath.

Проблема с этим, скажем, у вас есть маршрут к /myPath и маршрут к / (домашняя страница, то есть www.myWebsite.com/), а затем, когда пользователь переходит на www.myWebsite.com/myPath,домашняя страница также будет отображаться.Чтобы этого не произошло, просто оберните все маршруты в компоненте <Switch></Switch>.

Таким образом, окончательный код в части рендеринга app.jsx будет выглядеть так:

return (
    <div className="App">
        <div className="bg" />
        // Will always show `Header` no matter what the rout is.
        <Header/>

        <Switch>
            <Route path="/about" component={about} />
            <Route path="/" exact component={WelcomContent} />
        </Switch>

        // Will always show `Footer` no matter what the rout is.
        <Footer />
    </div>
);

Надеюсь это поможет.Дайте мне знать, если у вас есть еще вопросы.