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.
Related
I'm trying to make a navbar using react , but although the link has changed , the content never being changed !
routes in my App.js :
import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';
const App = () => (
<Router>
<Layout>
<Routes>
<Route exact path = '/' component = {Home} />
<Route exact path = '/blog' component = {Blog} />
<Route exact path = '/category/:id' component = {Category} />
<Route exact path = '/blog/:id' component = {BlogDetail} />
</Routes>
</Layout>
</Router>
);
export default App ;
Home.js file , the content "Home" doesn't appear , although the link changed:
import React from "react";
const Home = () => (
<>
<div>
Home
</div>
</>
);
export default Home;
Also the content of Blog.js file doesn't appear "same as Homel.js":
import React from "react";
const Blog = () => (
<div>
blog
</div>
);
code of navbar Navbar.js using bootstrap :
import React from "react";
import {Link, NavLink} from 'react-router-dom';
const Navbar = () => (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<Link className="navbar-brand" to="/">Around the world </Link>
<button className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" exact to = '/'>home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" exact to = '/blog'>Blog</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
export default Navbar;
Layout.js:
import React from "react";
import Navbar from '../components/Navbar';
const Layout = (props) => (
<div>
<Navbar />
{props.children}
</div>
);
export default Layout;
Nothing is rendered because you are not correctly using the Route component's element prop to render the routed components. In react-router-dom#6 gone are the component and render and children render function props, replaced by a single element prop taking a ReactElement, a.k.a. JSX.
Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactElement | null; // <-- routed component
index?: boolean;
path?: string;
}
const App = () => (
<Router>
<Layout>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/blog' element={<Blog />} />
<Route path='/category/:id' element={<Category />} />
<Route path='/blog/:id' element={<BlogDetail />} />
</Routes>
</Layout>
</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
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.
ReactJS router doesn't load the component in different route unless I refresh , even though I've created a different project with same installations and It does work properly, but in my current project it doesn't.
App.js
import React, {Component} from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './components/Home'
import Blogs from './components/Blogs'
import Footer from './components/Footer'
import Services from './components/Services'
class App extends Component {
render(){
return (
<BrowserRouter>
<div className='grid-container'>
<Navigation />
<div className='content'>
<Route path='/blogs' component={Blogs} />
<Route path='/' component={Home} exact/>
<Route path='/' component={Services}/>
</div>
<Footer />
</div>
</BrowserRouter>
);
}
}
export default App;
Home.js
import React from 'react';
import {Link, BrowserRouter} from 'react-router-dom'
const Home = () => {
return (
<BrowserRouter>
<section className="carousel-section-wrapper home">
<div className="carousel-inner">
<div className="carousel-section carousel-item active clip-bg pt-225 pb-200 img-bg">
<div className="container">
<div className="row">
<div className="col-xl-8 col-lg-10 mx-auto">
<div className="carousel-content text-center">
<div className="section-title">
<h2>test content</h2>
<p className="text-white">test content</p>
</div>
<Link to="/blogs" className="theme-btn">Read My Blogs</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</BrowserRouter>
)
}
export default Home
Blogs.js
import React from 'react';
const Blogs = () => {
return (
<h1>Blogs</h1>
)
}
export default Blogs
Expected result: componetns home and services disappear, and blogs component appear when I click to any button redirects to /blogs
Actual result: the state of the page stays the same unless I refresh the browser
your help would be appreciated.
You've used BrowserRouter in nested components, in your App and Home components and it won't work this way. To fix this, you only must have the BrowserRouter in the App component.
i am using react-router-dom in my project when i am proving routes instead of rendering the component in another page dom rendering component in the same page below my first component
My App.js
import React,{Component} from 'react';
import './App.css'
import Layout from './components/front/layout'
import FirstPage from './components/index/firstpage';
import {BrowserRouter ,Switch,Route} from 'react-router-dom';
class App extends Component {
render(){
return (
<div className="container">
<BrowserRouter>
<FirstPage/>
<Switch>
<Route path='/Layout' exact component={Layout} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
My another middlePortion.js where i am using imported from react-router-dom to route to another page
import React from 'react';
import { Button, Form } from 'reactstrap';
import axios from 'axios';
import '../../css/style.css'
import {Link} from 'react-router-dom'
class Middleportion extends React.Component {
constructor(props){
super(props);
this.Submit = this.Submit.bind(this);
}
render() {
const layStyle={
color:'white'
};
return (
<div className='row frnt'>
<div className="col-md-3">
</div>
<div className="col-md-6 am ">
<div className="row align-items-center">
<div className="row justify-content-center bg-primary pp">
<ul className="list-unstyled">
<li><Link style={layStyle} to='/Layout'>
male
</Link></li>
</ul>
</div>
</div>
</div>
<div className="col-md-3">
</div>
</div>
);
}
}
export default Middleportion;
I want to render my Layout component on separate page but its rendering on the same page please help me out
The problem with your code is that you're rendering FirstPage manually as if to be hard coded.
In order to get FirstPage and Layout to render in separate routes, you need to create a separate route inside your <Switch> and use FirstPage as the component prop like you did with Layout.
It would look like this:
(
<div className="container">
<BrowserRouter>
<Switch>
<Route exact path='/' component={FirstPage} />
<Route exact path='/Layout' component={Layout} />
</Switch>
</BrowserRouter>
</div>
)
With the setup above, the FirstPage component would render only on the / route and the Layout component would only render on the /layout route.