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
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>
);
}
I am trying to link a section ID using NavLink of react-router-dom but the link is requested to the server but does not link the specific id.
I want to link section Id with Navlink so that I can easily call the Id by clicking on the Navlink.
*Navbar.js*
import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav>
<div className='container spaceB flex'>
<div className='leftSide'>
<NavLink className='navLink' to={"/"}>
<h1 className='logoH'>{"<Rajib/>"}</h1>
</NavLink>
</div>
<div className='rightSide'>
<ul className='flex'>
<NavLink className='navLink' to='/#intro'>
<li>About</li>
</NavLink>
<NavLink className='navLink' to='/#skills'>
<li>Skills</li>
</NavLink>
<NavLink to='/#works' className='navLink'>
<li>Works</li>
</NavLink>
</ul>
<NavLink className='navLink' to='/#contact'>
<button className='btn'>Contact</button>
</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
*App.js*
import "./App.css";
import Intro from "./components/common/Intro";
import Navbar from "./components/common/Navbar";
import Services from "./components/common/Skills";
import Works from "./components/common/Works";
import Contact from "./components/common/Contact";
function App() {
return (
<>
<header>
<Navbar />
</header>
<main>
<Intro />
<Services />
<Works />
<Contact />
</main>
</>
);
}
export default App;
*index.js*
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App />} />
</Routes>
</BrowserRouter>
);
Please suggest the best solution so that i can link the section by calling it's Id in NavLink when clicking the specific navmenu.
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.
I'm testing React Router in a project (It's one of my first times using it), and, for some reason the routes aren't working when i click the 'Links', but when I type the route directly in the url, and then refresh the page, it works, can someone help me with that?
Here's the code:
App Component
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div className="App">
<NavBar />
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/products" component={ProductList} />
</Switch>
</Router>
</div>
);
NavBar Component (For now, I haven't included the 'My Cart' in the Links)
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Router>
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</Router>
<button className="btn text-light bg-dark">
<i className="fas fa-shopping-cart" />
My Cart
</button>
</nav>
);
}
export default NavBar;
This setup would work -
for App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div >
<Router>
<Route path="/" component={NavBar} />
<Route path="/" exact component={Home} />
<Route path="/products" exact component={ProductList} />
</Router>
</div>
);
}
for NavBar.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
Home
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</nav>
);
}
export default NavBar;
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.