React-router как перенаправить на порт сервера
Привет, я использую реактивный маршрутизатор v4.
Мой React работает на порту 3000, а экспресс-сервер работает на порту 8080. Сегмент Redirect в приведенном ниже коде приводит меня к localhost:3000/http://localhost:8080/auth/login.
У меня уже есть "proxy": "localhost:8080" в package.json моего React. Это не работает.
Как перенаправить с localhost:3000 на localhost:8080/auth/login?
App.js
class App extends Component {
constructor(props) {
super(props);
this.props.fetchProducts();
this.props.fetchUser();
}
render() {
return (
<Switch>
<Route exact path='/cart' render = {() => this.props.isLoggedIn ?
<Checkout /> :
<Redirect to='http://localhost:8080/auth/login' />
} />
<Route exact path='/user/account/profile' render = {() => <Profile />} />
<Route exact path='/' render = {() => <MainPage />} />
</Switch>
);
}
}
Пакет клиента.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.6.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"proxy": "http://localhost:8080",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Да, мой HTML-код для входа обслуживается «localhost: 8080/auth/login». Чтобы добавить, у меня уже есть "proxy": "localhost:8080" в моем React's package.json. Это не работает.
Ответы 4
Попробуйте добавить эту строку в свой package.json в папке клиента (где находятся файлы реакции).
"proxy": {
"/api/*": {
"target": "http://localhost:8080"
}
},
Это перенаправит ваши запросы на экспресс-сервер. Также измените перенаправление на перенаправление на /auth/login, вам не нужно указывать полный URL-адрес.
У меня уже есть `"proxy":"localhost:8080"` в моем пакете React package.json. Это не работает.
Вы можете просто добавить прокси в свой файл package.json для reactjs.
"proxy": "http://localhost:8080"
Это подключится к серверу nodejs, который запущен на порту 8080.
Вы должны вызывать API со стороны клиента, используя URL
axios.post('/api/auth', {credentials}).then(res => res.data.user)
и в то же время вы настраиваете маршруты в nodejs, используя маршруты, если вы используете экспресс
Это должно работать.
У меня уже есть «прокси»: «локальный: 8080» в моем пакете React package.json. Это не работает.
Поскольку я не мог использовать Redirect-маршрутизатор Redirect для ссылки на /auth/login, я изменил window.location.href в методе и вернул null.
class App extends Component {
constructor(props) {
super(props);
this.props.fetchProducts();
this.props.fetchUser();
}
redirect = () => {
window.location.href = 'http://localhost:8080/auth/login';
// maybe can add spinner while loading
return null;
}
render() {
return (
<Switch>
<Route exact path='/cart' render = {() =>
this.props.isLoggedIn ?
<Checkout /> :
this.redirect()
} />
<Route exact path='/user/account/profile' render = {() => <Profile />} />
<Route exact path='/' render = {() => <MainPage />} />
</Switch>
);
}
}
Я думаю, что если ваш экспресс-сервер работает на порту 8080, тогда реагирующий маршрутизатор не перенаправит вас на «http://локальный:8080/аутентификация/логин», потому что это API, который будет аутентифицировать ваши учетные данные имени пользователя и пароля.
вы можете использовать fetch/axios для вызова API входа в систему.
я думаю, вы проверяете, вошел ли пользователь в систему до того, как перенаправить на вход, но я не думаю, что вам нужно перенаправлять на страницу входа, если пользователь уже вошел в систему.
Как вы уже знаете из this.props.isLoggedIn, аутентифицирован ли пользователь или нет, не должен ли это быть this.props.isLoggedIn? <Checkout /> : <Login /> или ваш HTML-код для входа обслуживается «локальный: 8080/аутентификация/логин»?