Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   Подружить react-router с expressjs (https://javascript.ru/forum/server-tools/75868-podruzhit-react-router-s-expressjs.html)

MaratYahooch 13.11.2018 14:18

Подружить react-router с expressjs
 
Сервер:
app.use("/", express.static(path.join(__dirname, "../client/build")));
app.use("/admin", express.static(path.join(__dirname, "../admin/build")));

app.get('*', (req,res) =>{
    res.sendFile(path.join("index.html"));
});

app.get('/admin/*', (req,res) =>{
    res.sendFile(path.join("index.html"));
});


Клиент:
<Router>
       <div className="page">
         <Switch>
           <Route exact path="/" component={Home} />
           <Route exact path="/events" component={Events} />
         </Switch>
       </div>
</Router>


При запросе страницы example/ мой сервер возвращает мне index.html клиента и рендерится компонент Home, но при запросе example/events мой сервер пытается найти подобный роут у себя и соответственно не дает шанса react'у использовать react-router для рендера компонента Events. Как быть?
Проблема очевидная, но не могу найти решения.

SuperZen 13.11.2018 14:38

на первый взгляд надо поменять местами
app.get('*...
и
app.get('/admin...

MaratYahooch 13.11.2018 14:42

Что это даст?

SuperZen 13.11.2018 15:09

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

далее, непонятно, зачем запрашивать example/events если у тебя в роуте написано /events ), тогда и ссылка должна быть http://localhost:3000/events

или часть example должна быть динамической...

MaratYahooch 13.11.2018 15:14

к /admin я обращаюсь без проблем. Роут example/events у меня в react-router(посмотри код клиента). Такое разбитие мне нужно для того, чтобы разделить пользовательскую и админскую часть на два реакт-приложения.

MaratYahooch 13.11.2018 15:14

Цитата:

Сообщение от MaratYahooch (Сообщение 498440)
к /admin я обращаюсь без проблем. Роут example/events у меня в react-router(посмотри код клиента). Такое разбитие мне нужно для того, чтобы разделить пользовательскую и админскую часть на два реакт-приложения.

то есть я делаю по сути два SPA приложения

SuperZen 13.11.2018 15:23

Цитата:

Сообщение от MaratYahooch (Сообщение 498441)
то есть я делаю по сути два SPA приложения

чем отличаются эти строки?
path.join(__dirname, "../admin/build")
path.join("index.html")

тогда для админа должен быть свой index.html где он подключает admin.bundle.js, тогда как client подключает client.bundle.js, например.

app.use("/", express.static(path.join(__dirname, "../client/build")));
app.use("/admin", express.static(path.join(__dirname, "../admin/build")));

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname, "client", "index.html"));
});

app.get('/admin/*', (req,res) =>{
    res.sendFile(path.join(__dirname, "admin", "index.html"));
});


) по моему вопрос сначала был не про это....

SuperZen 13.11.2018 15:33

и насчет очередности ты меня обманул:

const express = require('express')
const app = express();

app.get('*', function (req, res) {
  res.send('any')
})

app.get('/admin/*', function (req, res) {
  res.send('admin')
})

app.listen(3000, function () {
  console.log('at 3000')
})


Часовой пояс GMT +3, время: 03:35.