Как работать с React Router с помощью Node Express маршрутизации

Question

Я пытаюсь управлять приложением реагирования с помощью реагирующего маршрутизатора и узла js-сервера

мой маршрутизатор реагирует:

        <BrowserRouter>
        <Switch>
            <PrivateRoute token={token} Component={Payments} exact path="/payments"/>
            <PrivateRoute token={token} Component={User} exact path="/user"/>
            <PrivateRoute token={token} Component={User} exact path=""/>
            <PrivateRoute token={token} Component={User} exact path="/"/>
        </Switch>
       <BrowserRouter/>

 export const PrivateRoute = ({Component, ...rest,token}) => {

   return (
    <Route {...rest} render={props => token ? (<Component {...props}/>) :
        (<Redirect to={{pathname: '/login', state: {from: props.location}}}/>)

    }/>
   )

};

и мой маршрутизатор на моем сервере NodeJS:

const app = express();
const server = new Server(app);
const port = process.env.PORT || 5000;
app.use('/api',router);
app.use(express.static(path.join(__dirname, '/../react_dist')));
app.use('*',  (req, res)=> {
 res.sendFile(path.join(__dirname, '/../react_dist', 'index.html'));
});
server.listen(port,()=>{
 console.log('Server Is up : ', port)
});

при попытке доступа к localhost: 5000 / приложение реакции пользователя работает нормально, но когда я хочу получить доступ к localhost: 5000 / api, его перенаправленное в приложение реакции снова не может понять, как это исправить, что мне нужно изменить?спасибо

Answer 1

Решено!

, потому что я создал приложение реагирования с помощью команды create-реагировать-приложения, в которой мне нужно было добавить файл package.json:

"proxy": "http://localhost:5000"

и теперь, когда я пытаюсь сделать запрос GET следующим образом:

axios.get ('/ api / someurl') работает как положено

спасибо всем

Answer 2

Как выглядит ваш экспресс-маршрут? Как сказал вышеупомянутый пользователь, это действительно зависит от того, как выглядит файл вашего роутера в строке

app.use('/api', router);

Нет необходимости определять ваши маршруты API в реакции-маршрутизаторе. Тем не менее, я думаю, что вы не понимаете, как они работают вместе. Обычно response-router используется для маршрутизации на стороне клиента, в то время как express обрабатывает ваши внутренние маршруты, такие как выборка данных. Вы используете реагирующий маршрутизатор для маршрутизации пользователей на разные страницы и представления, в то время как ваши экспресс-маршруты будут просто отображать данные.

Answer 3

мой роутер:

const router = express.Router({});
router.get('/someurl',(res,req)=>{
       res.status(201).json({ message: "Hello World!" })
});

Answer 4

Вам необходимо определить Express-маршруты и контроллеры, чтобы они соответствовали внешнему запросу.

Скорее всего, это неверно / неправильно настроено: app.use('/api',router);

Невозможно точно знать, если вы не вставите, как выглядит ваш файл router.

Попробуйте заменитьэто с соответствующим внешним запросом:

app.delete('/api', callbackfunction)
app.get('/api', callbackfunction)
app.put('/api', callbackfunction)
app.post('/api', callbackfunction)

Express требуется запрос (приложение. [запрос]), маршрут ('/ api') и функция контроллера (функция обратного вызова).

app.get('/api', (req, res, done) => res.status(201).json({ message: "Hello World!" }));

app.use(express.static('client/build'));

app.get('*', (req, res) => res.sendFile(path.resolve('client', 'build', 'index.html')));

app.listen(5000);