I want to print url params(:uname ,:unumber) through Profile functional component. Here is my code.
My route in App.js
<Route path="/profile/:uname-:unumber" component={Profile} >
<Profile />
</Route>
I'm clicking profile url from Dashboard.js; this is my link
<Link to={{
pathname: `/profile/${userDetail.name}-${userDetail.u_number}`,
}} >view profile</Link>
on click on this link it is generating a url for eg: 'http://localhost:3000/profile-mynamehere-747484' and it is redirecting to profile component. But how to print to access the uname and unumber in profile component. I tried like this but not works
import React, {useState, useEffect, Component } from "react";
import axios from "axios";
import { useHistory,useParams } from "react-router-dom";
import Header from "../Header";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
const Profile = ({uname, unumber}) => {
console.log(uname); // here I want to print mynamehere from url, but not prints name
console.log(unumber);// here I want to print 747484 from url, but not prints unumber
return (
<div>
</div>
);
};
export default Profile;
use UseParams like this in profile component
const { uname,unumber } = useParams();
In Profile you should useParams to get pass the uname & unumber:
import { useHistory,useParams } from "react-router-dom";
const Profile = () => {
const {uname, unumber} = useParams()
console.log(uname);
console.log(unumber);
return (
<div>
</div>
);
};
In your profile component do the following:
import React, {useState, useEffect, Component } from "react";
import axios from "axios";
import { useHistory,useParams } from "react-router-dom";
import Header from "../Header";
const Profile = () => {
const {uname, unumber} = useParams()
console.log(uname-unumber)
return (
<div>
</div>
);
};
export default Profile;
Related
Im trying to use useContext hook to pass variables and functions through different components without lifting them to the main App.js component. I was trying to do this and it seemed to compile correctly but when i go to my browser my app is stucked in a blank page and remains loading.
LoginContext.js: In this component i store the user data in an object using the useState hook and i use jwt_decode to decode the use token and get all the data i need to store.
import React, { createContext, useState } from "react";
import jwt_decode from 'jwt-decode';
const LoginContext = createContext();
export function LoginProvider({children}) {
const [user, setUser] = useState({})
function handleCallbackResponse(response){
var userData = jwt_decode(response.credential); //Token with the login user Data
setUser(userData); //Store user Data
/* console.log(userData) */
document.getElementById('signInDiv').hidden = true;
}
function handleSignOut(event) {
setUser({}) //Empy the user Data
document.getElementById('signInDiv').hidden = false;
}
return(
<LoginProvider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginProvider>
);
}
export default LoginContext
The i have my Login.js which uses LoginContext: Here i use the user to show the different data of the logged in use and the handleCallbackResponse to do my Login.
import React, { useContext, useEffect } from 'react'
import LoginContext from '../LoginContext';
const Login = () => {
const {user, handleCallbackResponse, handleSignOut} = useContext(LoginContext)
useEffect(()=>{
/*global google*/
google.accounts.id.initialize({
client_id:"My client ID",
callback: handleCallbackResponse
})
google.accounts.id.prompt();
google.accounts.id.renderButton(
document.getElementById('signInDiv'),
{theme: 'outline', size: 'medium'}
)
}, []);
return (
<div>
<div id="signInDiv"></div>
{
//If user objetc is not empty show sign out button
Object.keys(user).length !== 0 &&
<button onClick={(e)=>handleSignOut(e)}>Sign Out</button>
}
{user &&
<div>
<img src={user.picture} alt="" />
<h3>{user.name}</h3>
</div>
}
</div>
)
}
export default Login
App.js:
import './App.css';
import Login from './atoms/Login';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import { LoginProvider } from './LoginContext';
import PrivateRoutes from './utils/PrivateRoutes';
function App() {
return (
<LoginProvider>
<BrowserRouter>
<Routes>
{/* <Route element={<PrivateRoutes/>}>
</Route> */}
<Route exact path="/dashboard" element={<Dashboard/>}/>
<Route path="/" element={<Login/>} />
</Routes>
</BrowserRouter>
</LoginProvider>
);
}
export default App;
For some reason my application runs with no error but in the browser it remains loading with a blank page and im not able to inspect the page.
Instead of:
<LoginProvider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginProvider>
);
Replace with
<LoginContext.Provider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginContext.Provider>
I'm just making a practice recipe app that uses a GET request to show recipes which I'm mapping through into their own individual Recipe components so I can give each an edit & delete button. For some reason, I thought I setup useParams correctly as well as matched the dynamic :id with what I extracted into the useParams hook aka { id } but it keeps popping up undefined. Everything else setup with Redux has been working without errors.
Here is my App.js file:
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Recipe from "./Recipe";
import Recipes from "./Recipes";
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route path='/recipes/:id' component={Recipe} />
<Route exact path='/recipes' component={Recipes} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
and here is my Recipe.js file:
import { useDispatch } from 'react-redux';
import { deleteRecipe } from './actions';
import { Link, useParams } from 'react-router-dom';
function Recipe({ recipe }) {
const dispatch = useDispatch();
let { id } = useParams();
console.log('id:', id);
const handleDelete = (id) => {
dispatch(deleteRecipe(id));
}
return (
<div>
<Link to={`/recipes/${id}`}>
<h5>{recipe.title}</h5>
<button onClick={handleDelete}>Delete</button>
</Link>
</div>
)
}
export default Recipe
It looks like you are in the Recipe show method trying to Link to another Recipe show. You will need to use the Recipes component, with a Link that houses the dynamic/static id. Then you can call useParams to get that id.
Example here from previous answer.
Im new to React and i have the following app: (index.js)
import ReactDOM from 'react-dom'
import {Component} from 'react';
import './style.css'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Header from './components/Header'
import Body from './components/Body'
import Footer from './components/Footer'
class App extends Component {
render() {
return (
<div id="layout">
<Header />
<Body />
<Footer />
</div>
);
}
}
ReactDOM.render( <App />, document.querySelector("#root"));
Each time I'm going to localhost:port Im redirected to this componenet,
I wanted to use Router and extract the data, for example:
localhost:port/instanceName=value will route me to same compontents with props value only if value is x or y, is that possible?
I suggest you to setup it this way. It is just a custom hook which extract all url parameters.
// use-query-string.js
import { useLocation } from 'react-router-dom';
export const useQueryString = () => {
return new URLSearchParams(useLocation().search);
};
Then you can call this in your component which gives you a list of query strings in the url. In fact every time you call it, it would give you a list of passed parameters.
const queryString = useQueryString();
And finally you can extract what you want. Simply by passing the name of the parameter you are looking for.
queryString.get('instanceName')
In your case it could be something like this.
import { useQueryString } from 'use-query-string';
class App extends Component {
const queryString = useQueryString();
useEffect(() => {
const value = queryString.get('instanceName');
if (value === 'x') {
// do this
} else if (value === 'y') {
// do that
}
}, [queryString])
render() {
return (
<div id="layout">
<Header />
<Body />
<Footer />
</div>
);
}
}
But keep in mind that your url should be like localhost:port?instanceName=value. Actually instead of / at the end you need to put ?. I am not sure if it works with / as well. You can test and tweak if it does not.
I am using contextApi with nextjs and I'm having some trouble when providing a context just for certain routes. I am able to make the context available for just a few routes, but when I transition from one to the other through linking, I end up losing the state of my application.
I have three files inside my pages folder:
index.tsx,
Dashboard/index.tsx and
SignIn/index.tsx.
If I import the provider inside the files Dashboard/index.tsx and SignIn/index.tsx and go from one page to the other by pressing a Link component from next/link, the whole state is set back to the initial state.
The content of the Dashboard/index.tsx file
import React from 'react';
import Dashboard from '../../app/views/Dashboard';
import { AuthProvider } from '../../contexts/auth';
const Index: React.FC = () => (
<AuthProvider>
<Dashboard />
</AuthProvider>
);
export default Index;
This is the contend of the SignIn/index.tsx file:
import React from 'react';
import SignIn from '../../app/views/SignIn';
import { AuthProvider } from '../../contexts/auth';
const Index: React.FC = () => (
<AuthProvider>
<SignIn />
</AuthProvider>
);
export default Index;
The views folder is where I create the components that will be rendered.
The content of the file views/SignIn/index.tsx is:
import React, { useContext } from 'react';
import Link from 'next/link';
import { AuthContext } from '../../../contexts/auth';
const SignIn: React.FC = () => {
const { signed, signIn } = useContext(AuthContext);
async function handleSignIn() {
signIn();
}
return (
<div>
<Link href="Dashboard">Go back to Dashboard</Link>
<button onClick={handleSignIn}>Click me</button>
</div>
);
};
export default SignIn;
And the content of the file views/Dashboard/index.tsx is:
import React, { useContext } from 'react';
import Link from 'next/link';
import { AuthContext } from '../../../contexts/auth';
const Dashboard: React.FC = () => {
const { signed, signIn } = useContext(AuthContext);
async function handleSignIn() {
signIn();
}
return (
<div>
<Link href="SignIn">Go back to sign in page</Link>
<button onClick={handleSignIn}>Click me</button>
</div>
);
};
export default Dashboard;
I am able to access the context inside both /Dashboard and /SignIn, but when I press the link, the state comes back to the initial one. I figured out that the whole provider is rerenderized and therefore the new state becomes the initial state, but I wasn't able to go around this issue in a "best practices manner".
If I put the provider inside _app.tsx, I can maintain the state when transitioning between pages, but I end up providing this state to the / route as well, which I am trying to avoid.
I was able to go around this by doing the following, but it really does not seem to be the best solution for me.
I removed the Providers from Pages/SignIn/index.tsx and Pages/Dashboard/index.tsx and used the following snippet for the _app.tsx file:
import React from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { AuthProvider } from '../contexts/auth';
const App: React.FC<AppProps> = ({ Component, pageProps }) => {
const router = useRouter();
const AuthProviderRoutes = ['/SignIn', '/Dashboard'];
return (
<>
{AuthProviderRoutes.includes(router.pathname) ? (
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
) : <Component {...pageProps} />}
</>
);
};
export default App;
Does anyone have a better solution?
hi react admin community,
I want to use logout button with custom component and router. I have checked documentation but not found any solution.
please suggest to me how I can use it.
below I added my code.
Adminroot Component
This is Admin Component.
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { UserList } from "../users/users";
import Dashboard from './dashboard';
import MyLogoutButton from '../auth/logout';
const authProvider = {
logout: params => Promise.resolve(),
};
function Adminroot(props) {
const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
return (
<div>
<Admin logoutButton={MyLogoutButton} loginPage={false} dashboard={Dashboard} dataProvider={dataProvider}>
<Resource name="users" list={UserList} />
</Admin>
</div>
);
}
export default Adminroot;
MyLogoutButton Component
This component contains default code which provides react-admin for logout.
Now, when clicks on Logout button. by default redirects to /login Url.
There renders a Logout component (below written the logout component code) that contains logout logic and redirect to /signin but it shows blank page until I refresh the page.
import React, { forwardRef } from 'react';
import { useLogout } from 'react-admin';
import MenuItem from '#material-ui/core/MenuItem';
import ExitIcon from '#material-ui/icons/PowerSettingsNew';
const MyLogoutButton = forwardRef((props, ref) => {
const logout = useLogout();
const handleClick = () => logout();
return (
<MenuItem
onClick={handleClick}
ref={ref}
>
<ExitIcon /> Logout
</MenuItem>
);
});
export default MyLogoutButton;
Logout Component
import React , { useContext } from 'react';
import { AppContext } from '../../AppContext';
import { Redirect } from 'react-router-dom';
function Logout(props){
const {handleSignOut} = useContext(AppContext);
handleSignOut();
return props.history.push('/signin');
}
export default Logout;