I'm starting to learn ReactJS and I have created a small app with 3 screens: home, about & users. I am using bootstrap for styles.
I have the following logic active={window.location.pathname === "/about"} for each link to pass in a boolean to determine if it the active page or not.
When I click the links it loads the page I need however the style doesn't update to reflect that the link is active however if I refresh the page it updates the style.
From what I've read online I can do something with states to reload the page to update the style etc but I'm not sure how to actually implement this.
Any help would be greatly appreciated.
App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import './App.css';
import Navigation from './components/navigation';
import Home from './views/home';
import Users from './views/users';
import About from './views/about';
export default class App extends Component {
render(){
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Switch>
<Route path="/about"><About /></Route>
<Route path="/users"><Users /></Route>
<Route path="/"><Home /></Route>
</Switch>
</Router>
</div>
);
}
}
Navigation.js
import React, { Component, useState } from 'react';
import NavigationItem from './navigationItem';
export default class Navigation extends Component {
render(){
return(
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<NavigationItem active={window.location.pathname === "/"} path="/" content="Home"></NavigationItem>
<NavigationItem active={window.location.pathname === "/about"} path="/about" content="About"></NavigationItem>
<NavigationItem active={window.location.pathname === "/users"} path="/users" content="Users"></NavigationItem>
</ul>
</div>
</div>
</nav>
</div>
);
}
}
NavigationItem.js
import React, { Component } from 'react';
import {Link} from "react-router-dom";
export default class NavigationItem extends Component {
render(){
if(this.props.active){
return(
<li class="nav-item">
<Link class="nav-link active" to={this.props.path}>{this.props.content}</Link>
</li>
);
} else {
return(
<li class="nav-item">
<Link class="nav-link" to={this.props.path}>{this.props.content}</Link>
</li>
);
}
}
}
There's another React Router component called NavLink that has an activeClassName attribute that you may find useful.
I use it like this:
<li>
<NavLink
activeClassName={styles.active}
to="/path"
>Route path
</NavLink>
</li>
where active is the class I bring in from my CSS module.
Related
Greetings iam in need of help so I am taking an online course of react and I followed sir Kalob step by step but while assigning keyword using usestate() it is printing [object object] instead of the actual keyword which I set using hook and so I tried to look for different solutions from
useState("searching for")
I changed it to
useState({name :"searching for"})
and while assigning it to keyword i changed it from
keyword={searchText}
to
keyword={searchText.name}
but still, it's giving me the same output I am out of solutions any help would be appreciated.
All necessary screenshots are attached.
enter image description here
enter image description here
enter image description here
APP.JS
import Navbar from './components/navbar';
import Home from './components/home';
import React from 'react';
import SearchView from './components/SearchView'
import {useState,useEffect} from 'react';
import AboutView from './components/AboutView';
import {Routes , Route} from 'react-router-dom';
import './App.css';
function App() {
const[searchResults,setSearchResults] = useState([]);
const [searchText,setSearchText] = useState('');
return (
<div>
<Navbar searchText={searchText} setSearchText={setSearchText}/>
<Routes>
<Route path="/" element={<Home />} />
<Route path='/about' element={<AboutView />} />
<Route path='/search' keyword= {searchText}searchResults={searchResults} element ={<SearchView />} />
</Routes>
</div>
);
}
export default App;
Navbar.Js
// import App from "../App"
import React from 'react';
import {Link} from 'react-router-dom';
const Navbar = ({searchText,setSearchText}) => {
const updateSearchText = (e) =>{
setSearchText(e.target.value)
}
return(
<div>
<nav className="navbar navbar-expand-lg bg-light">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Link className="navbar-brand" to="/">Movie Browser </Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="/">Disabled</a>
</li>
</ul>
<form className="d-flex" role="search">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" value={searchText}
onChange={updateSearchText}/>
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
)
}
export default Navbar;
SearchView.js
import React from "react";
import Hero from "./Hero";
const SearchView =(keyword,searchResults)=>{
const title = `You are searching for ${keyword}`
console.log(searchResults,"are the search results")
return(
<div>
<Hero text ={title} />
</div>
)
}
export default SearchView;
Pass the props that SearchView should have through the element prop while calling the component.
<Route
path='/search'
element={
<SearchView keyword={searchText} searchResults={searchResults} />
}
/>
And your output is [object Object] because you're logging the props object, not the keyword string. Add the destructuring assignment of the props to actually get the props that are being passed.
const SearchView = ({ keyword, searchResults }) => {
const title = `You are searching for ${keyword}`;
return (
<div>
<Hero text ={title} />
</div>
);
}
Whenever i clicked on button url is change but content doesn't change and one more thing if i use <a> tag in exchange of <Link> tag then obviously page loading but content also load and update
but using <Link> tag it is not load data but url value is update so, please give me a solution for this
App.js
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import Home from "./component/pages/Home";
import Contect from "./component/pages/Contect";
import About from "./component/pages/About";
import Navbar from "./component/layout/Navbar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/Contect" component={Contect}></Route>
<Route exact path="/" component={Home}></Route>
<Route exact path="/About" component={About}></Route>
</Switch>
</Router>
);
}
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
import {} from "react-router-dom";
const Navbar = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div className="container">
<Link class="navbar-brand bg-light" to="/contect">
{props.title}
</Link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<Link class="nav-link bg-light" to="/">
Home
</Link>
</li>
<li class="nav-item active">
<Link class="nav-link bg-light" to="/About">
About
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Home.js
import React from "react";
const Home = () => {
return (
<>
<div className="container">
<div className="py-4">
<h1> Home page </h1>
</div>
</div>
</>
);
};
export default Home;
About.js and Contect.js is same as Home.js
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Contect" component={Contect}/>
<Route path="/About" component={About}/>
</Switch>
</Router>
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import New from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Name from './components/pages/Name';
import { BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const App = () => {
return(
<>
<Router>
<New/>
<Switch>
<Route Path='/' exact component = {Home} />
<Route Path='/About' exact component = {About} />
<Route Path='/Services' exact component = {Services}/>
<Route Path='/Name' exact component = {Name}/>
<Route Path='/Home' exact component = {Home}/>
</Switch>
</Router>
</>
)
}
export default App;
Conatct.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from 'react-dom';
function Contact () {
return (
<>
<h1>contact</h1>
</>
)
}
export default Contact;
Pages / Name.js (i have import Contact here)
import React from 'react';
import Contact from '../Contact'
export default function Name() {
return (
<>
<Contact />
</>
);
}
Navbar.js
import React from 'react';
import './Navbar.css'
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import { Button,Container,Navbar,Nav,NavDropdown,NavLink } from 'react-bootstrap';
import {
BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const New = () => {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className='col-10 mx-auto'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ms-auto mb-auto mb-lg-2">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Services">Services</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/About">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Contact">Contact</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
};
export default New;
First thing, using lowercase only in routes because browser concerto to lowercase
Second thing you need create a link component for react-router, NavLink is only UI element, not a valid like for rect router
should using this
https://reactrouter.com/web/api/Link
application.js (Entry point for webpack)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<App />, document.getElementById('app'))
});
App.jsx
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route
} from 'react-router-dom'
import Navbar from './components/Navbar'
import LandingPage from './components/landingPage'
import Clients from './components/Clients'
class App extends React.Component {
render(){
return (
<Router>
<div>
<Navbar />
<Switch>
<div className="container">
<Route exact path="/app" component={LandingPage} />
<Route exact path="/app/clients" component={Clients} />
</div>
</Switch>
</div>
</Router>
)
}
}
export default App
components/LandingPage.jsx
import React from 'react';
const LandingPage = (props) =>(
<div>
<h1>Hello World</h1>
</div>
)
export default LandingPage
components/Clients.jsx
import React from 'react';
class Clients extends React.Component {
render(props) {
return(
<div id="clients" className="clients">
<div className="row">
Clients!
</div>
</div>
)
}
}
export default Clients
components/Navbar.jsx
import React from 'react'
import {Link} from 'react-router-dom';
const Navbar = (props) => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li><Link to="/app/clients">GOTO CLIENTS</Link></li>
</ul>
</div>
</nav>
)
export default Navbar
Error in console log:
Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by App)
in Switch (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
I read in various other stack posts that this is a floating prop error when passing props around half-hazardly. However I am not passing any props here and am confused as to why this error is thrown. The app and components render fine too.
Any suggestion?
In your App.jsx, you are specifying the Switch logic like this:
<Switch>
<div className="container">
<Route exact path="/app" component={LandingPage} />
<Route exact path="/app/clients" component={Clients} />
</div>
</Switch>
However, a Switch component only expects Route as its children. Remove the <div className="container"> part and it should resolve this error message.
Keep in mind that I am completely fresh with react/django and I need all the help I can get.
I want to create a Navbar component in my application with React. The problem is that the navbar has links to other parts of the application.
What I am trying to do is to pass an array with all the links as props to my navbar component. But how can I get the links in javascript dynamically?
Right now I have this:
index.js:
let navbarUrls = [
{key: 0, url: "{% url 'main:index' %}"}
];
ReactDOM.render(<Navbar urls={navbarUrls} />, document.getElementById('navbar'));
Navbar.js:
import React, {Component} from 'react';
class Navbar extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{this.props.urls.map(url => (
<a class="navbar-brand" key={url.key} href={url.url}>Main Page</a>
))}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<div class="navbar-brand">
<div id="current-time">
</div>
</div>
</div>
</nav>
)
}
}
export default Navbar
While the elements are created, the links are of course not since it does not recognize twig... Maybe I am doing this completely wrong? Can someone direct me to the right way??
I am working with React and Django. I have faced a similar type of issue.
const navbarUrls = [
{title: 'TAB-1', path: ''},
{title: 'TAB-2', path: 'tab2'},
{title: 'TAB-2', path: 'tab3'},
];
Lat's Assume these are you links
Now Create a navbar component.
import React, {Component} from 'react';
import {Link} from 'react-router-dom'; // install react-router and react-router-dom version 4.x
class Navbar extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{this.props.navbarUrls.map(link => (
<Link to={link.path}>{link.title}</Link>
))}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<div class="navbar-brand">
<div id="current-time">
</div>
</div>
</div>
</nav>
)
}
}
export default Navbar
Now your index.jsx
import * as React from 'react';
import * as ReactDOM 'react-dom';
import {Route, HashRouter, Switch, Redirect} from 'react-router-dom';
import Navbar from 'your-path';
ReactDOM.render(
<HashRouter> // you can use BrowserRoute as well.
<Navbar urls={navbarUrls} />
<Switch>
<Route extact path="/" component={YourComponent1}/>
<Route path="/tab2" component={YourComponent2}/>
<Route path="/tab2" component={YourComponent2}/>
</Switch>
</HashRouter>,
document.getElementById('app')); //id from your main html page.
Please read the doc of react-router https://github.com/ReactTraining/react-router if you are not familiar with it.