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>
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>
react router and routes is not working , i could not able to navigate to blogs page .
App.js - the following code snippet contains the App.js and the router . i could not use switch due to the latest version of react js .
import './App.css';
import React,{Component} from 'react';
import { Navbar,Nav,Container,Row,Col,Button } from 'react-bootstrap';
import {Navigation} from './navbar/navbar.js';
import Luckywheel from './luckywheel/luckywheel';
import Luckymessage from './luckywheel/luckymessage';
import {Routes , Route , BrowserRouter as Routers} from 'react-router-dom'
import Blogs from './tools/blogs';
function App() {
return (
<div className="App">
<h1 className='heading'>LUCKY DRAWER</h1>
<Routers>
<Navigation />
<Luckywheel />
<Luckymessage />
<Routes>
<Route path='blogs' component={Blogs} />
<Route path='/' exact component={App} />
</Routes>
</Routers>
</div>
);
}
export default App;
Navbar.js - this file contains the navigation bar code
import React ,{Component} from 'react';
import { Navbar,Nav,Container,NavDropdown, } from 'react-bootstrap';
export function Navigation () {
return(
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href='blogs'>Blogs</Navbar.Brand>
<Navbar.Brand href='/'>Home</Navbar.Brand>
</Container>
</Navbar>
)
}
export default Navigation;
In react-router-dom v6 the Route component API changed significantly. It no longer takes component or render or children function props, all replaced by a single element prop that takes a ReactElement (a.k.a. JSX).
Routes and Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactElement | null;
index?: boolean;
path?: string;
}
Swap from component to element prop and pass the routed component as JSX.
<Routes>
<Route path='blogs' element={<Blogs />} />
<Route path='/' element={<App />} />
</Routes>
Install
npm i react-router-dom#5.2.0
To work with switch
import React, { Component } from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";
interface PrivateRoute {
isLoggedIn: boolean;
path: string;
component: any;
exact: boolean;
}
const PrivateRoute: React.FC<PrivateRoute> = ({
isLoggedIn,
component,
...rest
}) => {
return (
<Route
{...rest}
component={(props: any) =>
isLoggedIn ? <Component {...props} /> : <Redirect to="/" />
}
/>
);
};
const mapStateToProps = (state: any) => ({
isLoggedIn: !!state.auth.uid,
});
export default connect(mapStateToProps)(PrivateRoute);
So this is the component I have, for creating private routes. And the router is this;
import HeaderTop from "./HeaderTop/HeaderTop";
import HeaderBottom from "./HeaderBottom/HeaderBottom";
import Body from "./Body/Body";
import Footer from "./Footer/Footer";
import Movies from "./ShowPages/Movies";
import Series from "./ShowPages/Series";
import NotFoundPage from "./NotFoundPage/NotFoundPage";
import { Router, Switch, Route } from "react-router-dom";
import LoginPage from "./LoginPage/LoginPage";
import { createBrowserHistory } from "history";
import PrivateRoute from "./PrivateRoute";
export const history = createBrowserHistory();
const HomePage: React.FC = () => {
return (
<Router history={history}>
<div>
<HeaderTop />
<HeaderBottom />
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<PrivateRoute path="/meerkast" component={Body} exact={true} />
<PrivateRoute path="/movies" component={Movies} exact={true} />
<PrivateRoute path="/series" component={Series} exact={true} />
<Route component={NotFoundPage} />
</Switch>
<Footer />
</div>
</Router>
);
};
export default HomePage;
So what is going on here? I don't have class component why would I have render method anywhere? I found this question is asked many times on stackoverflow but no one had the proper answer.
Your issue is with inconsistant casing on the component prop. Your PrivateRoute gets a prop component with a lowercase c. When you call <Component {...props} /> with an uppercase C, that Component variable doesn't exist.
I understand the reason that you used uppercase in the JSX, which is that React interprets lowercase names as built-in elements. I also understand the reason that you used lowercase in the PrivateRoute props, which is that you wanted to be be consistent with react-router-dom's Route props.
But we have to make the two coexist. We do this by renaming the lowercase component to Component in the spread expression.
const PrivateRoute: React.FC<PrivateRoute> = ({
isLoggedIn,
component: Component,
...rest
}) => {
I am putting together a small application to get used to React, now I have installed React-Router-Dom and when I click a link the URL correctly changes. The issue is that the correct Component does not display.
index.js
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import Sidebar from './Components/Sidebar';
import SidebarItem from './Components/SidebarItem';
import Home from './Components/Home';
import './App.scss';
import { Link, Route, Switch } from 'react-router-dom';
class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div className="App">
<Link to='/home'>Home</Link>
<Switch>
<Route path='/home' Component={Home} />
</Switch>
</div>
);
}
}
export default App;
Can anyone tell me the reason why HomeComponent does not appear?
The prop of the Route that takes a component is spelled component with a small c, not Component.
Example
function Home() {
return <div> Home </div>;
}
class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/home">Home</Link>
<Switch>
<Route path="/home" component={Home} />
</Switch>
</div>
</Router>
);
}
}
I am working on a React.js web app , for some reasons I am not able to pass url parameters.
An example is being shown below:
Routes:
import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";
const AppRoutes = () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Helloworld}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/thirdview' component={ThirdView}/>
<Route path='/thirdview/:number' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>
</BrowserRouter>
);
export default AppRoutes;
Secondview Component
import React from 'react';
import {Link, withRouter} from 'react-router-dom';
class SecondView extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log("I am being called SecondView component...");
}
render() {
return (
<div className={"boxDiv"}>
<p>Second View</p>
<Link to={{pathname: '/thirdview/7'}}> GO to third view with parameter value. </Link>
</div>
);
}
}
export default withRouter(SecondView);
Thirdview comopnent:
import React from 'react';
import { Route, Link,withRouter } from 'react-router-dom';
import FourthView from "../fourthview/fourthview.component";
class ThirdView extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
console.log(this.props.match.params);
return (
<div className={"boxDiv"}>
<p>Third View</p>
{ console.log(this.props)}
<h1>parameter passed: (#{this.props.params.number})</h1>
</div>
);
}
}
export default withRouter(ThirdView);
What I want, is to be able to get /:number value on my thirdview component! Anyone knows how to achieve such thing in React.js? Are there other ways doing this?
What I get is empty object!
I think it should be:
{this.props.match.params.number}
instead of
{this.props.params.number}
and you don't need withRouter on ThirdView and SecondView as are passed to Route already.
EDIT:
Since you want to render the same component for /thirdview and /thirdview/7 use optional param matcher
<Switch>
<Route exact path='/' component={Helloworld}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/thirdview/:number?' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>