Category : react-router-dom

i am trying to use the useNavigate in my js page. here’s how I am trying to use it: import { loadStripe } from ‘@stripe/stripe-js’; import firebase from ‘firebase’; import "firebase/auth"; import * as routes from ‘../routes’; import ‘./checkout.css’; import React, { useState, useEffect } from "react"; import MyGifSpinner from ‘./manageSubSpinner’; import ‘./manageSubSpinner.css’; import ReactDOM ..

Read more

Routes import React from "react"; import { Route, Switch } from "react-router-dom"; import Home from ‘./components/Waveform/index’; import TrackView from ‘./components/Waveform/TrackView’ class App extends React.Component { render() { return ( <> <Switch> <Route path="/" component={Home} exact /> <Route path="/track" component={TrackView} exact /> </Switch> </> ); } } export default App; Layout import { useSelector } from ..

Read more

My App.js import React from "react"; import { BrowserRouter, Route } from "react-router-dom"; import Home from "./Components/screens/Home"; import Signup from "./Components/screens/Signup"; import Signin from "./Components/screens/Login"; import Profile from "./Components/screens/Profile"; import CreatePost from "./Components/screens/createPost"; import Navbar from "./Components/Navbar"; function App() { return ( <BrowserRouter> <Navbar /> <Route path="/"> <Home /> </Route> <Route path="/Signin"> <Signin /> </Route> ..

Read more

There is a component: function Blogs(props) { const [links, setLinks] = useState([]); function getBlogs() { const ids = props.ids; for (const id of ids) { getBlog(id).then(blog => setLinks([…links, <Link to={`/blog/${id}`}>{blog.name}</Link>])); } } async function getBlog(id) { let data = await fetch(`${root}/api/blog/${id}`); data = await data.json(); const blog = data.blog; return blog; } useEffect(() => { ..

Read more

URL: https://n9hon.csb.app?name=netflix&url=https://localhost?apikey=123&code=321 code: import { useLocation } from "react-router-dom"; function useQuery() { const {search} = useLocation(); const query = new URLSearchParams(search); console.log(‘name: ‘, query.get(‘name’)) console.log(‘url: ‘, query.get(‘url’)) return query } Output: name: netflix url: https://localhost?apikey=123 As you can see, the code parameter is lost. I expect the value of url parameter should be https://localhost?apikey=123&code=321. Source: ..

Read more

I’m building a navbar for a project and the above message is telling me to check the render method in my header component. I’ve tried everything I can think of, including looking through answers on here. Specifically, I tried moving the Header component between my App component and the index.js file Not sure if I ..

Read more

I am using functional component which provides authentication to the specific routes such as /home using server side authentication and local storage, happening in OnSubmit event of my of login page. Everything works fine I am getting redirected to homepage after successful login, the problem arises when I refresh the page from any route I ..

Read more

Just started learning web-dev recently so please excuse my perhaps naive question. I’ve seen many examples of using <Link> and <Route> to update the page. However, most contain a fixed navigation bar where the links sit, and the components themselves have but static content. It’s not immediately clear to me as to how to correctly ..

Read more

In my app I have a router set up like this <BrowserRouter basename={props.base_path}> <Switch> <Route path="/views/:view_id/card" render={(routerProps) => ( <> <Toolbar {…routerProps} /> </> )} ></Route> </Switch> </BrowserRouter> Inside Toolbar I would like to be able to change the value of :view_id. I know that using useHistory I can replace parts of the path but ..

Read more