as you may get from the title, passing props in react is not working. And i don´t get why.
import styled from 'styled-components';
const Login = (props) => {
return<div>Login</div>
}
export default Login;
On my App.js page here is the following:
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" >
<Login />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
Problem: if i start the script and render the page, nothing is shown. What am I doing wrong?
You should pass <Login /> as the element. Try this code:
App.js:
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" element={<Login />} />
</Routes>
</Router>
</div>
);
}
export default App;
<Login />... the Login component isn't passed any props so I wouldn't expect to see any in the component. Your issue is a misunderstanding how the Route component works. The only valid children of the Route component is another Route component in the case of nesting routes, otherwise, the routed content is passed on the Route component's element prop as a ReactNode, a.k.a. JSX.
Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
The Login component should be passed to the element prop.
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
</Routes>
</Router>
</div>
);
}
For more details/explanation see Why does <Route> have an element prop instead of render or component?
Related
I have been learning React for few days and I wrote simple project (single page application). Problem is that my page doesn't show anything - it's a blank page.
App.js
import './App.css';
import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';
function App() {
return (
<Router>
<Routes>
<Route exact path="/" component={Home}/>
<Route path="/wallet" component={Wallet}/>
</Routes>
</Router>
);
}
export default App;
Wallet.js
import React from "react";
export function Wallet() {
return (
<div>
<h1>Wallet Page!</h1>
</div>
);
}
Home.js
import React from "react";
export function Home() {
return (
<div>
<h1>Home Page!</h1>
</div>
);
}
So when I go to http://localhost:3001/ or http://localhost:3001/wallet I receive blank page. Could someone point me where I made a mistake?
In react-router-dom#6 the Route components render the routed content on the element prop as a ReactNode, i.e. as JSX. There is no longer any component, or render and children function props.
Routes and Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
Move the components into the element prop and pass them as normal JSX instead of as a reference to a component.
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/wallet" element={<Wallet />} />
</Routes>
</Router>
Inside App.js:
import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import Login from './components/Login/Login';
function App() {
const [token, setToken] = useState();
if(!token) {
return <Login setToken={setToken} />
}
return (
<div className="wrapper">
<h1>Application</h1>
<BrowserRouter>
<Routes>
/*<Route path="/dashboard">*/
<Route path="/dashboard" element={<Dashboard/>} /></Route>
/*<Route path="/preferences">*/
<Route path="/preferences" element={<Preferences/>} /></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;`
Inside Dashboard.js (../src/components/Dashboard/Dashboard.js):
import React from 'react';
export default function Dashboard() {
return(
<h2>Dashboard</h2>
);
}
Url: http://localhost:3000/dashboard
I want to see the Dashboard content along with the App page content (Application and Dashboard headers) when I load the browser. But when I load the browser, it only displays the App page content and getting the same error:
"Matched leaf route at location "/dashboard" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page."
You are using Routes instead of Router. Replace it on your line 3 and in the return().
Source: React-router https://v5.reactrouter.com/web/api/Route
//...
import { BrowserRouter, Route, Router } from 'react-router-dom';
//...
return ( ...
<Router>
/*<Route path="/dashboard">*/
<Route path="/dashboard" element={<Dashboard/>} />
/*<Route path="/preferences">*/
<Route path="/preferences" element={<Preferences/>} />
</Router>
...)
export default App;
Please specify which version of React router you are using, since a lot of the functionality has changed, is it 6.4 or is still 5 ?
Either way, please remove the comments of the routes, I don't think they help at all.
if you have chosen BrowserRouter from the 6.4 version then it should be used like this
import { BrowserRouter, Route } from 'react-router-dom';
return (
<BrowserRouter>
<Route path="/" element={<RootComp />} >
<Route path="dashboard" element={<Dashboard/>} />
<Route path="preferences" element={<Preferences/>} />
</Route>
</BrowserRouter>
)
export default App;
Where <RootComp /> should have an <Outlet /> as children
import { Outlet } from 'react-router-dom';
const RootComp = () => {
return <div><Outlet /></div>
}
export default RootComp;
Again, this is for the latest React Router component, however, I would advise using createBrowserRouter() rather than the old component-based trees, this way you can programatically create and manage the routes in an Object.
Well, I defined the react router as follows:
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Home/>} />
<Route path="details/:id" element={<ViewNote/>}/>
</Routes>
</BrowserRouter>
and I called it like this in the class component:
import React, { Component } from 'react'
export default class ViewNote extends Component {
componentDidMount(){
console.log(this.props.match.params.id);
}
render() {
return (
<div>
<h2>{this.props.match.params.id}</h2>
</div>
)
}
}
But it shows match undefined in the console!!!
how to solve it??
thanks.
I am using the latest version of react router. When I am using routes in my component, They are not rendering anything but When I remove the routes and use simply the component they are working fine. Not able to understand what is going wrong
This do not work and is not rendering anything on "/" or http://localhost:3000/
import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Route path="/" exact>
<Users />
</Route>
<Navigate to="/" />
</Router>
);
}
export default App;
This is rendering and working fine.
import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return <Users />;
}
export default App;
import React, {useState} from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
import Profiles from "./Profiles" // this is dummy
function App() {
const [state, setState] = useState(false)
return (
<Router>
<Routes>
<Route path="/" element={<Users />}/>
<Route path="/profiles" element={state ? <Profiles /> : <Navigate to="/" />} />
{/* so you redirect only if your state is false */}
</Routes>
</Router>
);
}
export default App;
It is because, You din't provide which element to render in Route. It has to be mentioned like element={<Users />}. So try like below,
import React from "react";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Users />} />
<Navigate to="/" />
</Routes>
</Router>
);
}
export default App;
Based on the docs, all Route components should be placed inside a Routes component, which is nested inside the BrowserRouter.
Also, I noticed you use Navigate everytime, even when you are already at the index path. I think this may cause a problem...
So, with that in mind, Change your code to
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Users from "./user/pages/Users";
function App() {
return (
<Router>
<Routes>
<Route path="/">
<Route index element={<Users />} />
</Route>
</Routes>
</Router>
);
}
export default App;
Issue
In react-router-dom#6 the Route component renders its content on the element prop as a ReactNode, a.k.a. JSX, the only valid child of the Route component is another Route component for the case of nesting routes. The Users component should be moved to the element prop.
Also, to render a redirect to a default route, the Navigate component should also be rendered on a generic route.
Solution
Move Users component onto route's element prop.
Move the Navigate component into a generic route and pass the replace prop so issue a redirect.
Example:
function App() {
return (
<Router>
<Route path="/" element={<Users />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Router>
);
}
My route set up returns a blank page with no error, the only thing that's showing up is the side menu. I don't know what I'm doing wrong?
App.js:
import React from "react";
import Sidebar from "./components/Sidebar";
import i18n from './i18n';
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Sidebar/>
<Routes>
<Route path='/' exact component={Dash} />
<Route path='/profile' exact component={Prof} />
</Routes>
</Router>
);
}
export default App;
Dash.js:
import React from "react";
import Dashboard from ".././components/Dashboard";
export default function Dash() {
return (
<>
<Dashboard />
</>
);
}
Prof.js:
import React from "react";
import Dashboard from ".././components/Profile";
export default function Prof() {
return (
<>
<Profile />
</>
);
}
I assume you are using React Router Dom v6 since you are using Routes instead of Switch, in which case it should be element, not component, the propriety where you pass that component for that route. Also, call the component when passing it, like so:
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
function App() {
return (
<Router>
<Sidebar />
<Routes>
<Route path="/" exact element={<Dash />} />
<Route path="/profile" exact element={<Prof />} />
</Routes>
</Router>
);
}
export default App;
⚠️: notice it's element={<Dash />} and not element={Dash}.
That's not how you use Routes object. You must use Routes > Route as a declaration. In order to go for what your trying which is to render a component based on url, you must use Outlets.
https://reactrouter.com/docs/en/v6/api#outlet