Как работать с React Router с маршрутизацией Node Express
Я пытаюсь управлять реагирующим приложением с помощью реагирующего маршрутизатора и узла 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.info('Server Is up : ', port)
});
при попытке доступа к localhost: приложение 5000 / пользовательское реагирование работает нормально но когда я хочу получить доступ к localhost: 5000 / api, он снова перенаправляется в приложение реагирования не могу понять, как это исправить что мне нужно изменить? Благодарность
проблема внутри этого переключателя реагирующего маршрутизатора. вы не определили путь для / api - это означает, что если у вас нет токена, и вы пытаетесь получить доступ к некоторому URL-адресу, он вернется, чтобы реагировать на приложение
@VelimirTchatchevsky не помогло: /
@karthik, так как обрабатывать маршрут в маршрутизаторе с боковой реакцией на узел js? <Путь маршрута = "/ api" />
Сделайте свой номер порта другим для обоих
Ответы 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);
Как выглядит ваш экспресс-маршрут? Как сказал вышеупомянутый пользователь, это действительно зависит от того, как выглядит ваш файл маршрутизатора в строке
app.use('/api', router);
Нет необходимости определять маршруты API в response-router. Однако я думаю, вы не понимаете, как они работают вместе. Обычно реактивный маршрутизатор используется для маршрутизации на стороне клиента, в то время как экспресс обрабатывает ваши внутренние маршруты, такие как выборка данных. Вы используете реагирующий маршрутизатор, чтобы направлять пользователей на разные страницы и представления, в то время как ваши экспресс-маршруты просто отображают данные.
мой роутер:
const router = express.Router({});
router.get('/someurl',(res,req)=>{
res.status(201).json({ message: "Hello World!" })
});
Решено!
поскольку я создал приложение для реагирования с помощью команды create-react-app cli, мне нужно было добавить в файл package.json эту строку:
"прокси": "http: // локальный: 5000"
и теперь, когда я пытаюсь сделать такой запрос GET:
axios.get ('/ api / someurl') работает должным образом
Спасибо вам всем
попробуйте заменить
app.use('*', (req, res)=> {наapp.use('/', (req, res)=> {