I'm currently trying to get the id params for a route, but it keeps turning up as 'undefined' when I console log it.
Here's where the route is defined. For some reason when I console.log(id), it keeps giving 'undefined'. Even when I put it in the body, it doesn't show up.
return (
<div className="App">
<Header />
<BrowserRouter>
<Routes>
<Route path="/monster/:id" element={<Monster />} />
<Route path="/monsterCard" element={<MonsterCard />} />
<Route path="/index" element={<Homepage />} />
</Routes>
</BrowserRouter>
</div>
);
And here's the component where I want to get the Id parameter
import React, { Component, useEffect, useState } from "react";
import { withRouter, useParams } from "react-router";
import "./Monster.css";
export default function Monster() {
const { id } = useParams();
console.log(id);
return <div className="monster-image-frame"></div>;
}
You are trying to import useParams from react-router but instead of it just try to import it from "react-router-dom".
import {useParams} from "react-router-dom";
Related
Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:
App.js
//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={Home} />
<Route path="/Pending" element={Pending} />
</Routes>
</BrowserRouter>
);
}
Home.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';
function Home(){
return(
<div>
<div>
<NavBar/>
</div>
<h1>HI</h1>
</div>
);
}
export default Home;
Issue
The Route component API changed in react-router-dom#6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.
Solution
Render the routed components as JSX, i.e. <Home /> instead of Home.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Pending" element={<Pending />} />
</Routes>
</BrowserRouter>
);
}
You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.
In your App.js file, you have to make the following changes in order to work:
import { Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<Routes>
<Route index path="/" element={<Home />}/>
<Route path="pending" element={<Pending />} />
</Routes>
);
}
For more info, please visit the official documentation here!
import './App.css';
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';
import Home from './Components/Home';
import About from './Components/About';
function App() {
return (
<>
<Router>
<Header/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/About" element={ <About/> } />
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:
App.js
//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={Home} />
<Route path="/Pending" element={Pending} />
</Routes>
</BrowserRouter>
);
}
Home.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';
function Home(){
return(
<div>
<div>
<NavBar/>
</div>
<h1>HI</h1>
</div>
);
}
export default Home;
Issue
The Route component API changed in react-router-dom#6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.
Solution
Render the routed components as JSX, i.e. <Home /> instead of Home.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Pending" element={<Pending />} />
</Routes>
</BrowserRouter>
);
}
You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.
In your App.js file, you have to make the following changes in order to work:
import { Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<Routes>
<Route index path="/" element={<Home />}/>
<Route path="pending" element={<Pending />} />
</Routes>
);
}
For more info, please visit the official documentation here!
import './App.css';
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';
import Home from './Components/Home';
import About from './Components/About';
function App() {
return (
<>
<Router>
<Header/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/About" element={ <About/> } />
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
I was trying to display my layout.jsx on the browser but keep getting "A <Route> is only ever to be used as the child of Routes element, never rendered directly;" error I tried wrapping it in Routes but keep getting the error.
import React from 'react'
import Sidebar from '../sidebar/Sidebar';
import Routes from '../Routes';
import {BrowserRouter, Route} from 'react-router-dom';
const Layout = () => {
return (
<BrowserRouter>
<Route render={(props) =>(
<div className='layout'>
<Sidebar {...props} />
<div className="layout__content">
<div className="layout__content-main">
<Routes />
</div>
</div>
</div>
)
} />
</BrowserRouter>
)
}
export default Layout
import React from 'react';
import {Route, Routes} from 'react-router-dom';
import Dashboard from '../pages/Dashboard';
import Customers from '../pages/Customers';
const RRoutes = () => {
return (
<Routes>
<Route path='/' component={Dashboard} />
<Route path='/customers' component={Customers}/>
</Routes>
)
}
export default RRoutes
import React from 'react'
const Sidebar = () => {
return (
<div>
Hello Sidebar
</div>
)
}
export default Sidebar
Since you are using react-router-dom#6 the Route component API changed quite a bit. There are no longer any component or render and children function props, they were replaced by a single element prop taking a ReactNode, a.k.a. JSX. Additionally, all Route components must be rendered by a Routes component, the spiritual successor to the v5 Switch component that handles route matching and rendering.
import React from 'react'
import {BrowserRouter, Route} from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar';
import MyRoutes from '../Routes';
const Layout = () => {
return (
<BrowserRouter>
<div className='layout'>
<Sidebar />
<div className="layout__content">
<div className="layout__content-main">
<MyRoutes />
</div>
</div>
</div>
</BrowserRouter>
);
}
...
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Dashboard from '../pages/Dashboard';
import Customers from '../pages/Customers';
const MyRoutes = () => {
return (
<Routes>
<Route path='/' element={<Dashboard />} />
<Route path='/customers' element={<Customers />}/>
</Routes>
);
}
export default MyRoutes;
Is there a way to pass the location prop and own made prop to another component? I've figured out how to pass DIR_URL through a function like below but I also need to use location prop later in ConfirmAccount component to read pathname property and so on. (Of course in this way it gets true value).
import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Main from './components/structure/Main';
import ConfirmAccount from './components/pages/ConfirmAccount';
import NoMatch from './components/pages/NoMatch';
class App extends Component {
render() {
const url = 'http://localhost:3006';
return (
<Fragment>
<Router>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/confirm">
{/* How can I pass the location? */}
<Route path="/:url" component={() => <ConfirmAccount DIR_URL={url} location />} />
</Route>
<Route component={NoMatch} />
</Switch>
</Router>
</Fragment>
);
}
}
export default App;
React Router DOM automatically passes match location and history props.
You can use the route render prop to pass them manually if you wish:
<Route path="/:url" render={(routeProps) => <ConfirmAccount DIR_URL={url} {...routeProps} />} />
I suggest that you use useHistory hook from ReactRouterDom inside your child component. There you got all the location stuff that you need.
Or pass route properties to rendering component:
import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route, useHistory } from 'react-router-dom';
import Main from './components/structure/Main';
import ConfirmAccount from './components/pages/ConfirmAccount';
import NoMatch from './components/pages/NoMatch';
class App extends Component {
render() {
const url = 'http://localhost:3006';
return (
<Fragment>
<Router>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/confirm">
{/* How can I pass the location? */}
<Route path="/:url" component={(routeProps) => <ConfirmAccount DIR_URL={url} {...routeProps} />} />
</Route>
<Route component={NoMatch} />
</Switch>
</Router>
</Fragment>
);
}
}
const ConfirmAccount = ({location}) => {
const history = useHistory()
}
export default App;
just import { useLocation } from 'react-router-dom' and use it like this:
const location = useLocation()
now you can access the location object.
read more about it here: https://reactrouter.com/web/api/Hooks/uselocation
or you can use withRouter HOC like this https://reactrouter.com/web/api/withRouter
The RouteParamPage.tsx is a React component that can consume URL parameters via the router. It is working.
The call is like this:
<Route path={"/p2/:lastname"} component={RouteParamPage}/>
The ParamPage.tsx component has a parameter in the signature.
I can call these components without a router like this:
<ParamPage label={"with params V2"}/>
The question is, how can I call the ParamPage.tsx component in the Route?
That doesn't work:
<Route path={"/p1"} component={ParamPage label={"with params V2"}}/>
Does somebody has any idea?
----------------- RouteParamPage.tsx --------------
import React from 'react';
import { useParams } from 'react-router-dom';
interface RouteParams {
lastname: string
}
export default function RouteParamPage() {
const params = useParams<RouteParams>();
return (
<React.Fragment>
<h1>{params.lastname}</h1>
</React.Fragment>
)
}
----------------- ParamPage.tsx --------------
import React from 'react';
type childProps = {
label: string,
}
export default function ParamPage( data: childProps ) {
return (
<React.Fragment>
<h1>{ data.label }</h1>
</React.Fragment>
)
}
----------------- Main.tsx --------------
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Home from "./Home";
import ParamPage from "./ParamPage";
import RouteParamPage from "./RouteParamPage";
export default function Main() {
return (
<React.Fragment>
<ParamPage label={"with params V2"}/> {/*<<<<this works*/}
<Router>
<Switch>
<Route path={"/"} exact component={Home}/>
<Route path={"/p1"} component={ParamPage label={"with params V2"}}/> {/*<<< That doesn't work:*/}
<Route path={"/p2/:lastname"} component={RouteParamPage}/>
</Switch>
</Router>
</React.Fragment>
)
}
You should use render props to pass parameter to the component which is render by the Route component like this
<Route path="/p1" render={(routeProps) => {
return <ParamPage label={"with params V2"}} {...routeProps}/>
}} />
To learn more about check the React Render Props Documentation
For this case, there is a render prop which needs to be used instead of component.
The code will be modified to below
<Route
path={"/p1"}
render={(props) => <ParamPage {...props} label={"with params V2"} />}
/>
Hope it helps. Revert for any doubts/confusions.