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?
CodePudding user response:
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;
CodePudding user response:
<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.
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
?