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>
);
}
}
Related
I am trying to render the h1 tag when following the path '/', however, when I refresh the page the text doesn't show up. I have already switched the tags with tags as I was following an old tutorial. I am using react-router-dom v6.
HomePage.Js
import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Routes>
<Route path='/'>
<h1>This is the home page</h1>
</Route>
<Route path='/join' element={ <RoomJoinPage /> } />
<Route path='/create' element={ <CreateRoomPage/> } />
</Routes>
</Router>
);
}
}
App.Js
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
set your routing in app.js like this
<Router>
<Switch>
<Route exact path='/'>
<h1>This is the home page</h1>
</Route>
<Route exact path='/join'> </Route>
<Route exact path='/create'> </Route>
</Switch>
</Router
I'm a newbie at React, please correct me if I'm wrong...I've used the Switch tag to enclose multiple Routes in my MainComponent.js file. However, I still got an error that says "A may have only one child element". I'm trying to navigate from one page to another.
For example, when I click on Menu in the landing page, I would like to get routed to Menu.
Please advise what went wrong. Thanks in advance.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
// pass dishes to children (MenuComponent.js) as props
/*
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}*/
render() {
return (
<BrowserRouter> {/* Make use of React Router */}
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
// Container Component
import React, { Component } from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes'; // .. means to go up one level to src
import { Switch, Route, Redirect } from 'react-router-dom';
class Main extends Component {
// pass dishes to children (MenuComponent.js) as props
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
// selectedDish: null
};
}
/*
onDishSelect(dishId) {
this.setState({selectedDish: dishId});
}
*/
render() {
const HomePage = () => {
return (
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path="/home" component={HomePage} />
<Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} /> {/* path should exactly match /menu and nothing else after /menu */}
{/* component={() => <Menu dishes={this.state.dishes} />} ----> this will allow to pass props to Menu component */}
<Redirect to="/home" /> {/* if the path doesn't match any above, redirect to /home */}
</Switch>
<Footer />
</div>
);
}
}
export default Main;
Just remove the <div className="App"> from your App.js file.
And use the below code as I have written below. It will 100% work for you.
import { BrowserRouter } from 'react-router-dom';
class App extends Component
{
render() {
return (
<BrowserRouter>
<Main/>
</BrowserRouter>
);
}
}
export default App;
I am a beginner learning ReactJS and was trying to make a full-stack quiz web application using DjangoRestFramework+ReactJS.
The Problem
I am not seeing anything rendering to my webpage when I try using imports. I am not getting any errors, but my web page is blank.
My Files
Here is my App.JS.
import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<HomePage />
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
My Index.html
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-9">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz App</title>
{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"
/>
</head>
<body>
<div id="main">
<div id="app">
</div>
</div>
<script src="{% static "frontend/main.js" %}"></script>
</body>
</html>
And my HomePage file
import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import {
BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render(){
return (
<Router>
<Switch>
<Route exact path="/"><p>This is the home page</p></Route>
<Route path="/join" component={GameJoinPage} />
<Route path="/create" component={CreateGamePage} />
</Switch>
</Router>
);
}
}
What I tried
When I put <h1>Hello World</h1> in place of <HomePage \>, It rendered the Hello World to the webpage as expected.
But when I put the <HomePage \> or any other tag such as <CreateGamePage \> In App.js, nothing renders to the webpage. I am not getting any errors on Webpack compilation.
Try with id #main
const appDiv = document.getElementById("main");
and just change HomePage.js to check
<Switch>
<Route exact path="/" render={()=> <h2>render default page</h2>}/>
<Route path="/join" component={GameJoinPage} />
<Route path="/create" component={CreateGamePage} />
</Switch>
Add router to the parent element
import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";
import { BrowserRouter as Router } from "react-router-dom";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<HomePage />
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Change the HomePage file to
import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Switch>
<Route exact path="/" render={() => <p>This is the home page</p>} />
<Route path="/join" component={GameJoinPage} />
<Route path="/create" component={CreateGamePage} />
</Switch>
);
}
}
I figured it out! The issue was not with my code, it was a misspelling in my HomePage.js file. I was trying to import CreateRoomPage from CreateGamePage when in fact in CreateRoomPage did not exist, the correct one was CreateGamePage. Thank you all for the helpful responses!
Before
HomePage.JS
import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateGamePage from "./CreateGamePage"; // Now its correct!
import { Switch, Route, Link, Redirect } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Switch>
<Route exact path="/" render={() => <p>This is the home page</p>} />
<Route path="/join" component={GameJoinPage} />
<Route path="/create" component={CreateGamePage} />
</Switch>
);
}
After
import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Switch>
<Route exact path="/" render={() => <p>This is the home page</p>} />
<Route path="/join" component={GameJoinPage} />
<Route path="/create" component={CreateGamePage} />
</Switch>
);
}
I have a react web app with a sidemenu. Whenever a user clicks on the link in the sidemenu, they are routed to a page that is rendered at the right side of the sidemenu. My question is, how do I do login for such a usecase seeing as any page I route to renders to the right of the sidemenu. I want the login page to be full screen without the side menu showing. This is what App.js looks like.
import React, { Component } from "react";
import { HashRouter } from "react-router-dom";
import Navigation from "./pages/General/components/Navigation";
import SideMenu from "./pages/General/components/SideMenu";
import "../src/css/App.css";
class App extends Component {
render() {
return (
<div>
<HashRouter>
<div className="main-wrapper">
<SideMenu />
<Navigation />
</div>
</HashRouter>
</div>
);
}
}
export default App;
Here is Navigation.js
import React from "react";
import { Route } from "react-router-dom";
import CalendarPage from "../../Calendar/CalendarPage";
import DoctorsList from "../../Doctors/DoctorsList";
import PatientsList from "../../Patients/PatientsList";
import AdminUsersList from "../../AdminUsers/AdminUsersList";
import SpecialitiesList from "../../Specialities/SpecialitiesList";
const Navigation = () => {
return (
<div className="mainarea">
<Route exact path="/" component={CalendarPage} />
<Route exact path="/scheduler" component={CalendarPage} />
<Route exact path="/doctors" component={DoctorsList} />
<Route exact path="/patients" component={PatientsList} />
<Route exact path="/admin-users" component={AdminUsersList} />
<Route exact path="/specialities" component={SpecialitiesList} />
</div>
);
};
export default Navigation;
The best solution I can figure out in terms of a clean design, is to implement another router in your App.jsx, because you are implementing the routing inside your component, and you need another one for your login page.
Then, your App.jsx could be like this:
import React, { Component } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import LogIn from "./pages/General/components/Login";
import HomePage from "./pages/General/components/HomePage";
import "../src/css/App.css";
class App extends Component {
render() {
return (
<div>
<Switch>
<Route path={'/login'} component={LogIn} />
<Route path={'/'} component={HomePage} />
<Redirect to="/" />
</Switch>
</div>
);
}
}
export default App;
Then, for your HomePage do the following
import React, { Component } from "react";
import { HashRouter } from "react-router-dom";
import Navigation from "./pages/General/components/Navigation";
import SideMenu from "./pages/General/components/SideMenu";
import "../src/css/App.css";
class HomePage extends Component {
render() {
return (
<div>
<HashRouter>
<div className="main-wrapper">
<SideMenu />
<Navigation />
</div>
</HashRouter>
</div>
);
}
}
export default HomePage;
I hope it helps!
Here is my solution, it not exactly a solution, but it will give you a basic idea on how to implement this.
The idea is to place the Login component in app.js, and conditionally display it if the user is logged in.
You will have to pass a handler function to login component through which you will be able to control app.js state.
When login will be sucessfull, u can show the Navigation and Sidemenu component.
import { Fragment } from "react";
import Login from "path/to/login";
class App extends Component {
state = { isLoggedIn: false };
loginHandler = () => {
this.setState({
isLoggedIn: true
});
};
render() {
return (
<div>
<div className="main-wrapper">
{isLoggedIn ? (
<Fragment>
<SideMenu />
<Navigation />
</Fragment>
) : (
<Login loginHandler={this.loginHandler} />
)}
</div>
</div>
);
}
}
Also you need write a separate router file, which will contain the main app.
This is used to show the app component when navigated to /
import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import App from './app';
const MainRoute = () => (
<HashRouter>
<Route path="/" component={App} />
</HashRouter>
);
export default MainRoute;
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>