React Components not showing using Router, Route, Link
By clicking the Menu button I can tell from the URL: "http://localhost:3000/Menu", that I have linked to the right route. However, the Menu component just won't show up.
Here is the code for my NavBar Component:
import React, {Component} from 'react';
import './index.css'
import logo from '../../image/laoma-logo.png'
import {NavItems} from "./NavItems/NavItems";
import {Link} from "react-router-dom";
class HeaderNav extends Component {
state = {clicked: false}
handleClick = () =>{
this.setState({clicked: !this.state.clicked})
}
render() {
return (
<nav className="NavItems">
<div>
<img className="NavLogo" src={logo} alt='LaoMa Logo'/>
</div>
<div className="menu-icon" onClick={this.handleClick}>
<i className={this.state.clicked ? 'fas fa-times':'fas fa-bars'}>
</i>
</div>
<ul className={this.state.clicked? 'nav-menu active': 'nav-menu'}>
{NavItems.map((item, index)=> {
return (
<li key={index}>
<Link className={item.cName} href={item.url} to={item.title}>
{item.title}
</Link>
</li>
)
})}
</ul>
</nav>
);
}
}
export default HeaderNav;
Here is my Menu component,
import React, {useState} from 'react';
import items from "../../../data/items";
import Categories from "./Categories";
import Items from "./Items";
import './index.css'
const allCategories = ['all', ...new Set(items.map((item) => item.category))];
function Menu() {
const [menuItems, setMenuItems] = useState(items);
const [categories] = useState(allCategories);
const filterItems = (category) => {
if (category === 'all') {
setMenuItems(items);
return;
}
const newItems = items.filter((item) => item.category === category);
setMenuItems(newItems);
};
return (
<main>
{/* <Route path={NavItems.title} component={Menu}/> */}
<section className='menu section'>
<Categories categories={categories} filterItems={filterItems}/>
<Items items={menuItems}/>
</section>
</main>
);
}
export default Menu;
Here is my App components:
import HeaderNav from './components/HeaderNav/index';
import {Component} from "react";
import { BrowerRouter as Router, Route} from 'react-router-dom';
import './App.css';
import Menu from './components/Body/Menu';
export default class App extends Component {
render() {
return (
<div className="App">
<Router>
<HeaderNav/>
<Route path='/Menu'>
<Menu/>
</Route>
</Router>
</div>
);
}
}
Just from the sake of completion, here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I realized that I should use exact path='' instead of path='' because how router works is that it will go through every routes and apply the very first one in the list. And with partial matching, it will return the component or page pf the first nested route, and here 'exact' comes into play and solve the issue.
Related
I am trying to implement a cart as a Modal on my project. The issue is that the Backdrop is rendering as it should but the Overlay isn't. It has been 30 minutes but I can't figure out the error, attaching the files below.
For now, the Modal should render all the time according to the code as I have yet to implement the conditional rendering but that isn't an issue, the issue is that the Overlay isn't showing up for some reason.
App.js file
import "./App.css";
import { useState } from "react";
import Middlebar from "./Components/Middlebar";
import FilterTab from "./Components/FilterTab";
import ProductPage from "./Components/ProductPage";
import Navbar from "./Components/Navbar";
import { Route, Switch } from "react-router-dom";
import Data from "./Components/data.json";
import ProductDetail from "./pages/ProductDetail";
import Cart from "./Components/Cart";
function App() {
const [searchedTerm, setSearchedTerm] = useState("");
const getSearchTerm = (term) => {
setSearchedTerm(term);
};
return (
<Switch>
<Route path="/" exact>
<Navbar onSearch={getSearchTerm} />,
<Cart/>,
<Middlebar />,
<div className="filter-product row">
{" "}
<FilterTab></FilterTab>{" "}
<ProductPage searchTerm={searchedTerm}></ProductPage>{" "}
</div>
</Route>
<Route path="/product/:id">
<ProductDetail></ProductDetail>
</Route>
</Switch>
);
}
export default App;
Modal.js file
import { Fragment } from "react";
import ReactDOM from "react-dom";
import "./Modal.css";
const Backdrop = (props) => {
return <div onClick = {props.onClick} className="backdrop"></div>;
};
const ModalOverlay = (props) => {
return (
<div className="modal">
<div className="content">{props.children}</div>
</div>
);
};
const portalElement = document.getElementById("overlays");
export default function Modal(props) {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
}
Cart.js file
import React from "react";
import Modal from "../Modal";
import "./Cart.css";
export default function Cart() {
return (
<Modal>
<div className="total">
<span>Total</span>
<span>hi</span>
</div>
<div className="actions">
<button className="button--alt">
Close
</button>
<button className="button">Order</button>
</div>
</Modal>
);
}
Using a simple link to / route to via React browser Router.
I got it to work fine with routing to the root component (/), however it does not function as expected when trying to route to (/drink/:drinkId), though the URL changes and the page loads if I manually try to access it.
App component:
import React from "react";
import "./App.css";
import Cocktails from "./Cocktails";
import { Container } from "react-bootstrap";
import NavApp from "./Navbar";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import DrinkDetails from "./DrinkDetails";
import "./App.css";
function App() {
return (
<Router>
<Container className="App-container">
<NavApp />
<Switch>
<Route exact path="/">
<Cocktails size={20} />
</Route>
<Route exact path="/drink/:drinkId">
<DrinkDetails />
</Route>
</Switch>
</Container>
</Router>
);
}
export default App;
Drink details component:
import { React, useState, useEffect } from "react";
import { Jumbotron, Button } from "react-bootstrap";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams,
} from "react-router-dom";
import axios from "axios";
function DrinkDetails() {
let { drinkId } = useParams();
const [drink, setDrink] = useState(null);
const [ingrdts, setIngrdts] = useState([]);
useEffect(() => {
const getDrinkSpecs = async () => {
const res = await axios.get(
`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${drinkId}`
);
let newDrink = res.data.drinks[0];
setDrink(newDrink);
let newIngrdts = [];
for (let i = 1; i <= 15; i++) {
if (newDrink[`strIngredient${i}`] != null) {
let ingrdtVal = {};
ingrdtVal["ing"] = newDrink[`strIngredient${i}`];
ingrdtVal["val"] = newDrink[`strMeasure${i}`];
newIngrdts.push(ingrdtVal);
}
}
setIngrdts([...newIngrdts]);
};
getDrinkSpecs();
}, [drinkId]);
return drink ? (
<Jumbotron>
<h1>
{drink.strDrink}
<img src={drink.strDrinkThumb} />
</h1>
<p>Glass: {drink.strGlass}</p>
<p>Category: {drink.strCategory}</p>
<p>Instructions: {drink.strInstructions}</p>
{ingrdts.map((ingrdt) => (
<p>
{ingrdt.ing} : {ingrdt.val}
</p>
))}
<p>
<Button variant="primary">Learn more</Button>
</p>
</Jumbotron>
) : (
<Jumbotron>
<h1>Hmmm... we don't have this yet!</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</Jumbotron>
);
}
export default DrinkDetails;
and this is where I use Link:
import React from "react";
import { Button, Card } from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./Card.css";
function CardDrink({ data, select }) {
return (
<Router>
<Card className="Cocktail-card">
<Link to={`/drink/${data.idDrink}`}>
<Card.Img
variant="top"
src={data.strDrinkThumb}
className="Cocktail-card-img"
onClick={() => select(data.idDrink)}
/>
</Link>
<Card.Body>
<Card.Title>{data.strDrink}</Card.Title>
</Card.Body>
</Card>
</Router>
);
}
export default CardDrink;
Remove <Router> from CardDrink component. You need only one Router at root level which you already have in App component.
Also, as a practice don't keep unused imports in your component. I see Router imported in DrinkDetails component as well.
From docs
To use a router, just make sure it is rendered at the root of your element hierarchy. Typically you’ll wrap your top-level element in a router.
Try to use the useHistory() hook:
import React from "react";
import { Button, Card } from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route, Link, useHistory } from "react-router-dom";
import "./Card.css";
function CardDrink({ data, select }) {
const history = useHistory()
return (
<Router>
<Card className="Cocktail-card">
<div onClick={()=>history.push(`/drink/${data.idDrink}`)}>
<Card.Img
variant="top"
src={data.strDrinkThumb}
className="Cocktail-card-img"
onClick={() => select(data.idDrink)}
/>
</div>
<Card.Body>
<Card.Title>{data.strDrink}</Card.Title>
</Card.Body>
</Card>
</Router>
);
}
export default CardDrink;
I'm a newbie in React js and currently i'm building a layout that contains from many components
For example, a home page layout that contains sidebar component, topbar component, footer component and main content component.
When i click on a link in sidebar component, the main content will be changed based on url of link i clicked on and other components will be same on all pages regardless of url.
Here is my code:
MainLayout.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Sidebar from '../components/Sidebar';
const MainLayout = ({children, ...rest}) => {
return (
<div className="page page-dashboard">
{/* <div className="sidebar"><Sidebar></Sidebar></div> */}
<div className="main">
{children}
</div>
</div>
)
}
const MainLayoutRoute = ({component: Component, ...rest}) => {
return (
<Route {...rest} render={matchProps => (
<MainLayout>
<Component {...matchProps} />
</MainLayout>
)} />
)
};
export default MainLayoutRoute;
MainPage.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Sidebar from './Sidebar';
import Header from './Header';
import Footer from './Footer';
import UsersList from './UsersList';
export default class MainPage extends Component {
render() {
return (
<Router>
<div>
<Header/>
<Sidebar/>
<div className="wrapper">
<Switch>
<Route path={"/users"} component={UsersList} />
</Switch>
</div>
<Footer></Footer>
</div>
</Router>
);
}
}
Sidebar.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
export default class Sidebar extends Component {
render() {
return (
<div className="sidenav">
<ul>
<li><Link to="/users">Users</Link></li>
<li><Link to="/settings">Setting</Link></li>
</ul>
</div>
);
}
}
UserList.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
export default class UsersList extends Component {
render() {
return (
<div>
<button><Link to="/newuser">Add new user</Link></button>
</div>
);
}
}
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import './css/custom.scss';
/** Layouts **/
import LoginLayoutRoute from "./layouts/LoginLayout";
import MainLayoutRoute from "./layouts/MainLayout";
/** Components **/
import MainPage from './components/MainPage';
import LoginPage from './components/LoginPage'
export default class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/login" />
</Route>
<LoginLayoutRoute path="/login" component={LoginPage} />
<MainLayoutRoute path="/home" component={MainPage} />
</Switch>
</Router>
);
}
}
But when i refresh the page, it turned blank like this:
Before i refresh page
After i refresh page
How can i fix this ?
here is the code
when i try to route at localhost:3000/a nothing appears
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import Route from "react-router/Route";
//import Home from "./components/Home";
const Home = () => {
return (
<div>
<h6>East or West home is The best </h6>
</div>
);
};
class App extends Component {
state = {};
render() {
return (
<Router>
<div className="app">
<Route path="/a" Component={Home} />
</div>
</Router>
);
}
}
export default App;
ReactDOM.render(<App />, document.getElementById("root"));
use Route instead of Router and wrap your App under Router like below
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter as Router } from 'react-router-dom';
const Home = () => {
return (
<div>
<h6>East or West home is The best </h6>
</div>
);
};
class App extends Component {
state = {};
render() {
return (
<div className="app">
<Route>
<Route path="/a" Component={Home}
/>
</div>
);
}
}
export default App;
ReactDOM.render(<Router><App /></Router>, document.getElementById("root"));
I'm trying to set up my react.js environment to build a UI Toolkit. I'm using react-router, but for some reason the URL changes when I click on the links rendered from Index.js, but the content stays the same. It just continues displaying the content from the index.js page instead of changing to the content of the link I clicked. I'm not getting any error messages on the console.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
function run(){
const reactMount = document.getElementById('app');
ReactDOM.render(<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory} routes={routes}/>, reactMount );
}
new Promise((resolve) => {
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', resolve);
} else {
window.attachEvent('onload', resolve);
}
}).then(run)
routes.js
import React from 'react';
import { IndexRoute, Route } from 'react-router';
import Index from './pages/Index';
import Text from './pages/Text';
import Icon from './pages/Icon';
var routes = (
<Route path="/" component={Index}>
<Route path="/Text" component={Text} />
<Route path="/Icon" component={Icon} />
</Route>
);
export default routes;
pages/Index.js
import React from 'react';
import {Link} from 'react-router';
class Index extends React.Component {
render() {
return (
<div>
<ul role="nav">
<li><Link to="/Text">Text</Link></li>
<li><Link to="/Icon">Icon</Link></li>
</ul>
</div>
)
}
}
export default Index;
pages/Text.js
import React from 'react';
class Text extends React.Component {
render() {
return (
<div>
<h1>Text</h1>
</div>
)
}
}
export default Text;
Two things here:
The nested routes Text and Icon in your route configuration shouldn't have / before them. It should be like this: <Route path="Text" component={Text} />.
In your container component (Index) you need to access this.props.children so that the component knows to render it's children (the nested routes).
// Index.js
return (
<div>
<ul role="nav">
<li><Link to="/Text">Text</Link></li>
<li><Link to="/Icon">Icon</Link></li>
</ul>
{ this.props.children }
</div>
)