I want to show a navbar whenever user is logged in
when ever user presses login button i replace the page with home page
i've tried to define use state and on condition of if path name is not equal to /login or /step-two set it to true then in the app i said if usestate was equal by true show the navbar
but i don't see navbar until i refresh the page
here is what i have tried in useeffect
const [hasNavBar, setNavBar] = useState(false)
useEffect(() => {
console.log(history.location.pathname);
if (history.location.pathname !== '/login'|| history.location.pathname !=='/step-two'
) {
setNavBar(true)
}
}, [])
here is the whole code
const App = () => {
const [hasNavBar, setNavBar] = useState(false)
useEffect(() => {
console.log(history.location.pathname);
if (history.location.pathname !== '/login' ||
history.location.pathname !== '/step-two'
) {
setNavBar(true)
}
}, [])
return (
<div>
<SNackbar></SNackbar>
<Router history={history}>
<div>
<Route path="/login" exact component={FirstLogin} />
<Route path="/step-two" exact component={SecondLogin} />
<Route path="/home" exact component={Home} />
<Route path='/ranking-list' exact component={RankingListPage} />
</div>
</Router>
<div>
{hasNavBar ?
<div>
<BottomNavBar />
</div> : ''
}
</div>
</div>
)
};
export default App;
update
i tried to use history.listen bu still i see the same error
const App = () => {
const [hasNavBar,setnavbar]=useState(false)
useEffect(() => {
history.listen(()=>{
if (history.location.pathname === '/'||history.location.pathname === '/steptwo') {
setnavbar(false);
}else{setnavbar(true);}
})
if (localStorage.getItem("token") && history.location.pathname === '/') {
history.replace('/home');
}
}, [])
return (
<div>
<SNackbar></SNackbar>
<Router history={history}>
<div>
<Route path="/" exact component={FirstLogin} />
<Route path="/steptwo" exact component={SecondLogin} />
<Route path="/home" exact component={Home} />
<Route path='/ranking-list' exact component={RankingListPage} />
</div>
</Router>
{hasnavbar?
<div
style={{ position: 'fixed', bottom: '0px', width: "100%", height: '80px' }}>
<BottomNavBar />
</div>:''
}
</div>
)
};
export default App;
as #lissettdm said
you need to use history.listen to call an function whenever history changes
but no need to Wrap App inside Router
if you don't use history.listen usestate only would change whenever you refresh the page as the useeffect would be run on refresh
you could define its default to false and whenever it is not in the condition it would be true a else statement so that whenever you change the route it would be called and make hasnavbar to true
const [hasnavbar,setnavbar]=useState(false)
useEffect(() => {
history.listen(()=>{
if (history.location.pathname === '/login'||history.location.pathname === '/steptwo') {
setnavbar(false);
}else{setnavbar(true);}
})
}, [])
here is the whole code
const App = () => {
const [hasnavbar,setnavbar]=useState(false)
useEffect(() => {
history.listen(()=>{
if (history.location.pathname === '/login'||history.location.pathname === '/steptwo') {
setnavbar(false);
}else{setnavbar(true);}
})
}, [])
return (
<div>
<SNackbar></SNackbar>
<Router history={history}>
<div>
<Route path="/login" exact component={FirstLogin} />
<Route path="/steptwo" exact component={SecondLogin} />
<Route path="/home" exact component={Home} />
<Route path='/ranking-list' exact component={RankingListPage} />
</div>
</Router>
{hasnavbar?
<div>
<BottomNavBar />
</div>:''
}
</div>
)
};
export default App;
Wrap App inside Router component and listen for history changes:
index.js
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
App.js
const history = useHistory();
useEffect(() => {
return history.listen(location => {
if (
history.location.pathname !== "/login" &&
history.location.pathname !== "/step-two"
) {
setNavBar(true);
}
});
}, []);
See working example: https://stackblitz.com/edit/react-5xd5d1?file=src%2FApp.js
Change your useEffect's logic from || to &&, right now it doesn't make sense.
Try to use a useLocation hook instead:
import { useLocation } from 'react-router-dom';
...
let location = useLocation();
...
if (location.pathname !== '/login' && location.pathname !== '/step-two') { ... }
Related
I'm trying to maintain state values between routes in context. But it gets reset when the route changes.
aackage.json:
"react-router-dom": "^6.8.0",
"react-dom": "^18.2.0",
"react": "^18.2.0",
App.js:
export default const App = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const getData = async () => {
setLoading(true);
const data = await axios.get("url", {
withCredentials: true,
});
setData(data);
setLoading(false);
};
useEffect(() => {
getData()
console.log("I run on route change");
}, []);
const GlobalContextValue= {
data: data,
loading: loading,
};
return (
<>
<GlobalContextProvider value={GlobalContextValue}>
<BrowserRouter>
<Routes>
<Route index element={<HomePage />} />
<Route path="/:slug" element={<PostPage />} />
{/* <Route path="*" element={<NoPage />} /> */}
</Routes>
</BrowserRouter>
</<GlobalContextProvider />
</>
)
}
Whenever I try to access any route the getData function inside the useEffect calls which inturns resets the data. I have attached a CodeSandbox to replicate the same
I don't know if this problem is related to reactJs or react-router. Thanks in advance
As you don't seem to have any navigation link, I assume you are using the browser search bar, or a normal HTML <a> tag. Well, doing so refreshes the page, so the entire app gets re-created.
Using useNavigate or Link from React Router Dom, doesn't refresh the page, hence your context data remains untouched:
const HomePage = () => {
return (
<>
<h1>Hii Homepage </h1>
<Link to="/1">Go to PostPage</Link>
</>
);
};
const PostPage = () => {
const params = useParams();
return (
<>
<h1>Hii PostPage {params.slug} </h1>
<Link to="/">Go to HomePage</Link>
</>
);
};
export default function App() {
useEffect(() => {
console.log(
"I run on load and route change with browser search bar, not with useNavigate or Link"
);
}, []);
return (
<>
{/* This context wrapping BrowserRouter keeps its value if you navigate with Link or
useNavigate. */}
<GlobalContextProvider value={{ key: "some value" }}>
<BrowserRouter>
<Routes>
<Route index element={<HomePage />} />
<Route path="/:slug" element={<PostPage />} />
{/* <Route path="*" element={<NoPage />} /> */}
</Routes>
</BrowserRouter>
</GlobalContextProvider>
</>
);
}
I am new to React and I am using the Traversy crash course and the extra video about the react router 6+.
My Routes are like
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
return (
<div className="container">
<Router>
<Header
title='sikyona'
onAdd={()=> setShowAddtask(!showAddTask)}
showAdd={showAddTask}
/>
<Routes>
<Route
path='/'
element={
<>
{showAddTask && <AddTask onAdd={addTask} />}
{tasks.length > 0
? <Tasks tasks={tasks} onDelete={deleteTask} />
:<p>add tasks</p>
}
</>
}
/>
<Route path='/about' element={<About/>} />
</Routes>
<Footer />
</Router>
</div>
);
The problem is that when I navigate to the homepage http://localhost:3000/ I first see the About page for a second, and then the homepage (Route path='/'...)
I have "react-router-dom": "^6.4.1",
What is this happening and how can I fix it?
The issue isn't that the "About" page or About component is being rendered when the app is loading or navigating to "/" for the first time. It's that the app is actually on "/" and there's no tasks to display just yet and the UI is rendering the container, Header, the Route for path="/" with the "add tasks" text, and the Footer which renders a link to "/about".
Contrast this rendered UI with the actual "/about" path and About component.
Perhaps the UI/UX is fine for you with regards to this behavior and understanding what exactly is being rendered when, and for what reason. If on the other hand you don't want to see any of the UI until data has been loaded you can tweak the code to render nothing or some loading indicator while the tasks are fetched.
Example:
function App() {
const [showAddTask, setShowAddtask] = useState(false);
const [tasks, setTasks] = useState(); // <-- initially undefined
useEffect(() => {
const getTasks = async () => {
try {
const tasks = await fetchTasks();
setTasks(tasks); // <-- defined and populated
} catch(error) {
// log errors, display message, etc... or ignore
setTasks([]); // <-- defined and empty
}
};
getTasks();
}, []);
...
if (!tasks) {
return null; // <-- return null or loading indicator/spinner/etc
}
return (
<div className="container">
<Router>
<Header
title="hello"
onAdd={() => setShowAddtask(show => !show)}
showAdd={showAddTask}
/>
<Routes>
<Route
path="/"
element={
<>
{showAddTask && <AddTask onAdd={addTask} />}
{tasks.length ? (
<Tasks tasks={tasks} onDelete={deleteTask} />
) : (
<p>add tasks</p>
)}
</>
}
/>
<Route path="/about" element={<About />} />
<Route path="/task-details/:id" element={<TaskDetails />} />
</Routes>
<Footer />
</Router>
</div>
);
}
Try to put your <Route path='/' /> last in the list.
I am a newbie trying to build a React blog. Routes etc work fine except when a dynamic route comes into question. The Link does not render unless refreshed.
Here is App.js where the Routes are defined
function App() {
const [username, setUsername] = useState('');
const [loggedIn, setLoggedIn] = useState(false);
return (
<>
<Router history={customHistory}>
<div className="App">
<UserContext.Provider value={{ username, setUsername, loggedIn, setLoggedIn }}>
<Navigation />
<Switch>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route exact path="/blog/:id" component={BlogDetails} />
<Route path="/content" component={Content} />
<Route path="/logout" component={Logout} />
<Route exact path="/" component={Home} />
</Switch>
</UserContext.Provider>
</div>
</Router>
</>
)
}
export default App;
Here is BlogItems.js which calls the :
import { Link } from 'react-router-dom';
function BlogItems() {
const [blogList, setBlogList] = useState([])
useEffect(() => {
Axios.get("http://localhost:3001/api/get"
, { withCredentials: true })
.then((res) => {
setBlogList(res.data);
});
}, []);
return (
<div className="blog-list">
{blogList && blogList.map((blog) => {
return (
<div className="blog-elems" key={blog && blog.id}>
<Link to={`/blog/${blog.id}`}>{blog.title}</Link>
<h6>By <span>Ritu Rawat</span> on {DateFormater(blog.dated)}</h6>
<div className="blog-list-body">{blog && blog.body.slice(0, 200) + '...'}</div>
</div>
);
})}
</div>
) }
export default BlogItems;
and this is the actual BLogDetails Page which needs to be called from the dynamic route:
const BlogDetails = (props) => {
console.log(props);
//const { username } = useContext(UserContext);
const [blog, setBlog] = useState(null);
const { id } = useParams();
useEffect(() => {
console.log("BLOG ARTICLE");
Axios.get(`http://localhost:3001/api/blog/${id}`
, { withCredentials: true })
.then((res) => {
setBlog(res.data[0]);
});
}, [id]);
return (
<>
<div className="blog-background">
<div className="blog-list">
<div className="blog-elems" key={blog && blog.id}>
<h2> {blog && blog.title}</h2>
<h6>By <span>Ritu Rawat</span> on {blog && DateFormater(blog.dated)}</h6>
<div className="blog-list-body">{blog && blog.body}</div>
</div>
<Comments id={id} />
</div>
</div>
</>
)
}
export default BlogDetails;
I'm building a small app with firebase and react and currently working on implementing the authentication. I've set the onAuthStateChanged in my app component as a side effect and whenever user is logged in it should be redirected to a desired component from ProtectedRoute.
This works correctly but unfortunately when refreshing the page the ProtectedRoute is not rendering correct component and is just firing redirection.
I get what is happening: on refresh user is empty and only after then it change so I would expect to see a screen flicker and a proper redirection.
Could you please look at below code and maybe tell me how to fix this behavior?
App component:
const App = () => {
const [authUser, setAuthUser] = useState<firebase.User | null>(null);
const Firebase = useContext(FirebaseContext);
useEffect(() => {
const authListener = Firebase!.auth.onAuthStateChanged((authUser) => {
authUser ? setAuthUser(authUser) : setAuthUser(null);
});
return () => authListener();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<AuthUserContext.Provider value={authUser}>
<Router>
<div>
<Navigation />
<hr />
<Route exact path={ROUTES.LANDING} component={Landing} />
<Route exact path={ROUTES.SIGN_UP} component={SignUpPage} />
<Route exact path={ROUTES.SIGN_IN} component={SignIn} />
<Route
exact
path={ROUTES.PASSWORD_FORGET}
component={PasswordForget}
/>
<ProtectedRoute exact path={ROUTES.HOME} component={Home} />
<ProtectedRoute exact path={ROUTES.ACCOUNT} component={Account} />
<Route exact path={ROUTES.ACCOUNT} component={Account} />
<Route exact path={ROUTES.ADMIN} component={Admin} />
</div>
</Router>
</AuthUserContext.Provider>
);
};
Protected Route:
interface Props extends RouteProps {
component?: any;
children?: any;
}
const ProtectedRoute: React.FC<Props> = ({
component: Component,
children,
...rest
}) => {
const authUser = useContext(AuthUserContext);
return (
<Route
{...rest}
render={(routeProps) =>
!!authUser ? (
Component ? (
<Component {...routeProps} />
) : (
children
)
) : (
<Redirect
to={{
pathname: ROUTES.SIGN_IN,
state: { from: routeProps.location },
}}
/>
)
}
/>
);
};
Found the fix. Had to add the flag checking for user authentication status (default value of that flag is set to true). Flag needs to be passed to ProtectedRoute as prop and if is True then render some loading component:
App component:
const App = () => {
const [authUser, setAuthUser] = useState(false);
const [authPending, setAuthPending] = useState(true);
const Firebase = useContext(FirebaseContext);
useEffect(() => {
const authListener = Firebase!.auth.onAuthStateChanged((authUser) => {
setAuthUser(!!authUser);
setAuthPending(false);
});
return () => authListener();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<AuthUserContext.Provider value={authUser}>
<Router>
<div>
<Navigation />
<hr />
<Switch>
<Route exact path={ROUTES.LANDING} component={Landing} />
<Route exact path={ROUTES.SIGN_UP} component={SignUpPage} />
<Route exact path={ROUTES.SIGN_IN} component={SignIn} />
<Route
exact
path={ROUTES.PASSWORD_FORGET}
component={PasswordForget}
/>
<ProtectedRoute
pendingAuth={authPending}
exact
path={ROUTES.HOME}
component={Home}
/>
<ProtectedRoute
pendingAuth={authPending}
exact
path={ROUTES.ACCOUNT}
component={Account}
/>
<Route exact path={ROUTES.ACCOUNT} component={Account} />
<Route exact path={ROUTES.ADMIN} component={Admin} />
</Switch>
</div>
</Router>
</AuthUserContext.Provider>
);
};
ProtectedRoute:
interface Props extends RouteProps {
component?: any;
children?: any;
pendingAuth: boolean;
}
const ProtectedRoute: React.FC<Props> = ({
component: Component,
children,
pendingAuth,
...rest
}) => {
const authUser = useContext(AuthUserContext);
if (pendingAuth) {
return <div>Authenticating</div>;
}
return (
<Route
{...rest}
render={(routeProps) =>
!!authUser ? (
Component ? (
<Component {...routeProps} />
) : (
children
)
) : (
<Redirect
to={{
pathname: ROUTES.SIGN_IN,
state: { from: routeProps.location },
}}
/>
)
}
/>
);
};
i'm trying to use React Context to manage authentication, but i can't see the value that return the context in PrivateRoute.js
App.js
render() {
return (
<>
<BrowserRouter>
<Islogin>
<Header/>
<Banner/>
<Switch>
<PrivateRoute exact path="/index" component={Landing} />
<PrivateRoute path="/upload" component={Upload} exact />
<PublicRoute restricted={false} path="/unauth" component={Unauthorized} exact />
</Switch>
</Islogin>
</BrowserRouter>
</>
);
}
}
export default App;
the console log of isAuthenticated returns undefined
PrivateRoute.js
const PrivateRoute = ({component: Component, ...rest}) => {
const isAuthenticated = useContext(AuthContext)
console.log(isAuthenticated)
const [validCredentials, setValidCredentials] = React.useState(false)
React.useEffect(() => {
if (typeof isAuthenticated === 'boolean') {
setValidCredentials(isAuthenticated)
}
}, [isAuthenticated])
return (
// Show the component only when the user is logged in
// Otherwise, redirect the user to /signin page
<Route {...rest} render={props => (
validCredentials ?
<Component {...props} />
: <Redirect to="/unauth" />
)} />
);
};
export default PrivateRoute;
IsLogin.js
The api call works and the console log shows true.
export default function Islogin({ children }) {
var [auth, setAuth] = React.useState(false)
React.useEffect(() =>{
axios.post('/api/auth').then(response => {
var res = response.data.result;
console.log("try")
console.log(res)
setAuth(res)
})
},[])
return (
<AuthContext.Provider value={auth}>
{children}
</AuthContext.Provider>
)
}
You may need to import it at the top of the file that you are using it in (PrivateRoute.js)
Try this:
import {useContext} from 'react'