I am returning a custom redirect URL for OAuth using a Nodejs back end. I am trying to get React to redirect the user to this URL however it's adding localhost to the front of it.
import React, { Component } from "react";
import { withRouter } from "react-router";
import axios from "axios";
class Test extends Component {
async componentDidMount() {
const profileData = await axios.get("/connect");
this.props.history.push(profileData.data);
}
render() {
return <div />;
}
}
export default withRouter(Test);
So let's say the profileData.data returned string is http://www.google.com, the webpage gets redirected to http://localhost:3000/http://www.google.com.
Is there a way of redirecting with React to make it redirect to a specific URL rather than it trying to redirect to a sub page?
Simply put a set the location href inside your componentDidMount function. I would write it like this:
componentDidMount() {
axios.get("/connect")
.then((response) => {
window.location.href = response.data
})
}
Related
How can I send data using post
I got this
router.push({
pathname: "/investigacion-detalle",
query: { data: JSON.stringify(salida),},
});
but all it's sended on the url, I want to use a redirect post, to send all data and make the redirection, but I don't know how to make that, I try making a fetch but that only give me a response from the page not the redirect
The redirect Page:
import React,{useEffect} from "react";
import { useRouter } from 'next/router'
import { withRouter } from 'next/router'
const InvestigacionDetalle = (props)=>{
const router = useRouter()
const handleURL = (e)=>{
router.push('/investigacion');
};
useEffect(()=>{
console.log(props.router.query.data);
},[])
return(
<div>
<div>Investigacion page</div>
<button onClick={handleURL}>test</button>
</div>
);
}
export default withRouter(InvestigacionDetalle);
Can anyone help me with React Hooks basics, I am relatively new and couldn't find proper help online
import React from 'react'
import { auth, provider } from "../../../firebaseSetup";
import { useNavigate } from "react-router-dom"
const GoogleAuth = async() => {
const navigate = useNavigate()
auth.signInWithPopup(provider).then(() => {
navigate('/home');
}).catch((error) => {
console.log(error.message)
})
}
export default GoogleAuth
I get error on const navigate = useNavigate() saying:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component
What they want for useNavigate (and all hooks) is to be called only at the top level of a React component or a custom hook.
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.
See Rules of Hooks for more.
A solution to your problem could be calling const navigate = useNavigate() in the component where you will use GoogleAuth, and pass navigate as parameter.
As an example like so:
import React from 'react'
import { auth, provider } from "../../../firebaseSetup";
import { useNavigate } from "react-router-dom"
const GoogleAuth = async(navigate) => {
auth.signInWithPopup(provider).then(() => {
navigate('/home');
}).catch((error) => {
console.log(error.message)
})
}
export default GoogleAuth
import GoogleAuth from "GoogleAuth";
const App = ()=>{
/*
here at the top level, not inside an if block,
not inside a function defined here in the component...
*/
const navigate = useNavigate();
useEffect(()=>{
GoogleAuth(navigate)
},[])
return <div></div>
}
export default App;
I have a custom hook that will check whether you are logged in, and redirect you to the login page if you are not. Here is a pseudo implementation of my hook that assumes that you are not logged in:
import { useRouter } from 'next/router';
export default function useAuthentication() {
if (!AuthenticationStore.isLoggedIn()) {
const router = useRouter();
router.push('/login');
}
}
But when I use this hook, I get the following error:
Error: No router instance found. you should only use "next/router" inside the client side of your app. https://err.sh/vercel/next.js/no-router-instance
I checked the link in the error, but this is not really helpful because it just tells me to move the push statement to my render function.
I also tried this:
// My functional component
export default function SomeComponent() {
const router = useRouter();
useAuthentication(router);
return <>...</>
}
// My custom hook
export default function useAuthentication(router) {
if (!AuthenticationStore.isLoggedIn()) {
router.push('/login');
}
}
But this just results in the same error.
Is there any way to allow routing outside of React components in Next.js?
The error happens because router.push is getting called on the server during SSR on the page's first load. A possible workaround would be to extend your custom hook to call router.push inside a useEffect's callback, ensuring the action only happens on the client.
import { useEffect } from 'react';
import { useRouter } from 'next/router';
export default function useAuthentication() {
const router = useRouter();
useEffect(() => {
if (!AuthenticationStore.isLoggedIn()) {
router.push('/login');
}
}, []);
}
Then use it in your component:
import useAuthentication from '../hooks/use-authentication' // Replace with your path to the hook
export default function SomeComponent() {
useAuthentication();
return <>...</>;
}
import Router from 'next/router'
create a HOC which will wrap your page component
import React, { useEffect } from "react";
import {useRouter} from 'next/router';
export default function UseAuthentication() {
return () => {
const router = useRouter();
useEffect(() => {
if (!AuthenticationStore.isLoggedIn()) router.push("/login");
}, []);
// yous should also add isLoggedIn in array of dependancy if the value is not a function
return <Component {...arguments} />;
};
}
main component
function SomeComponent() {
return <>...</>
}
export default UseAuthentication(SomeComponent)
I'm learning React and TypeScript and I am trying to write a login form, but after checking the user's data and creating the cookie, I want to rerender the parent component.
I have index.tsx (short version):
import React from 'react';
import ReactDOM from 'react-dom';
import cookie from 'react-cookies'
function Main() {
let hmCookies = cookie.loadAll();
console.log(hmCookies.auth);
if (hmCookies.auth === 'true') {
return (<Logout />)
} else {
return (<Login />)
}
}
ReactDOM.render(<Main />, document.getElementById('root'));
and Logint.tsx:
import React from 'react';
import cookie from 'react-cookies'
const axios = require('axios');
class Login extends React.Component<any, any> {
...
handleSubmit(event) {
axios.post('http://localhost/php/Login.php', {
login: this.state.login,
password: this.state.password
}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.then(function (response) {
if (response.data.auth == true) {
cookie.save('auth', true);
}
})
.catch(function (error) {
console.log(error);
});
event.preventDefault();
}
render() { return ( <LoginFormHere /> ) }
}
export default Login;
After posting the user data in the form and making a request to PHP script via ajax, PHP returns a response. If it's true, save cookie. So, after changing cookie, I want to rerender component Main. However, I have no idea how to do this and I can't find any examples of this in the documentation.
How can this be achieved?
You can create a function in your Main component to serve to rerender. Let's call it - updateParent. Then you can pass updateParent function to your Login component as props and use it if response.data.auth == true. updateParent can be implemented as in the following question.
Here the example.
Also, you could use a stateful(class) component instead of functional. This allows you to use forceUpdate
I have an Express backend for an API and I'm trying to get data to my React front end. I am able to navigate to the address in my browser and get the data without a problem. Then I'm using axios in React to access the API data shown in the browser screenshot. I've included my React code along with my browser data and response header from the browser access.
import React, { Component } from 'react';
import axios from 'axios';
class TestQuery extends Component {
constructor(props) {
super(props);
this.state = {
pitches: []
}
}
componentDidMount() {
axios.get('192.168.0.169:3000/test')
.then( res => {
console.log(res);
})
}
render() {
return (
<div>
test
</div>
);
}
}
export default TestQuery;
React Code Data in Browser Response Headers