My navbar icon doesn't show up and the console announce the mistake at App.js as:"Line 9: 'Router' is not defined react/jsx-no-undefct/jsx-no-undef".
I don't know what is wrong with my codes. Anybody can help me? Thank you so much!
This is my App.js:
import React from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import { BrowserRouter as Browser, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>{" "}
</Router>{" "}
</>
);
}
export default App;
This is my Navbar.js:
import React from "react";
import * as FaIcons from "react-icons/fa";
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<div className="navbar">
<Link to="#" className="menu-bars">
<FaIcons.FaBars />
</Link>{" "}
</div>{" "}
</div>
);
}
export default Navbar;
You seem to be using something that's not defined (Router) in your App.js, rename Browser to Router in the react-router-dom import to make it work
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" />
</Switch>
</Router>
</>
);
}
Related
This question already has an answer here:
React Route render blank page
(1 answer)
Closed 4 months ago.
I was trying to create simple navbar where onclick will redirect to component but unable to redirect to the page.
Like if I click on dogs it should be redirected to home component i have given component navbar where link to dogs is available.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Navbar.js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Home from "./Home";
import Select from "./Select";
function Navbar({ props }) {
return (
<div className="navbar">
<li>
<Link to="/">Dogs</Link>
</li>
<li>
<Link to="/cats">Cats</Link>
</li>
<li>
<Link to="/sheeps">Sheeps</Link>
</li>
<li>
<Link to="/goats">Goats</Link>
</li>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
function Home() {
return (
<div>
<h3>Dogs</h3>
<div>
<img src="./dog.png"/>
<img src="./dog.png"/>
</div>
</div>
);
}
export default Home;
App.js
import "./App.css";
import Navbar from "./Components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Components/Home";
import Select from "./Components/Select";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path="/" component={<Home />} />
<Route path="/cats" component={<Select />} />
</Routes>
</Router>
</div>
);
}
export default App;
In new versions of react-router-dom you should use "element" instead of "component"
like:
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/cats" element={<Select />} />
</Routes>
'Navbar' is declared but its value is never read
In app.js the code is :
import React from 'react';
import Navbar from './components/navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Router>
<navbar/>
<switch>
<Route path ='/' exact/>
</switch>
</Router>
</>
);
}
export default App;
In navbar.js the code is
import React, {useState} from 'react';
import { link } from 'react-router-dom';
function Navbar()
{
return (
<>
<nav className='navbar'>
<div className='navbar-container'>
<link to='/' className='navbar-logo'>
BLKA
</link>
</div>
</nav>
</>
);
}
export default Navbar;
I want to create a simple react router example and have added my code below. The components gets displayed on refresh but the links doesn't seem to work. I have kept my links in 'Header.js' file and the components inside a folder called 'functional'. Can someone help me with this, am new to this and appreciate all the help.
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
import Container1 from './container/container1';
import Header from './container/header';
import history from './utils/history';
import { Router, Route, Switch } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path = "/" component={Container1} />
<Route path="/component1" render={() => <Component1/>} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Switch>
</div>
</Router>
</div>
);
}
}
export default Routes;
header.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Header extends Component {
render () {
return (
<div>
<Link to='/' style={{padding: '5px'}}>
Home
</Link>
<Link to='/component1' style={{padding: '5px'}}>
component1
</Link>
<Link to='/component2' style={{padding: '5px'}}>
component2
</Link>
<Link to='/component3'style={{padding: '5px'}}>
component3
</Link>
</div>
);
}
}
export default Header;
App.js
import React from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<div>
<Routes />
</div>
);
}
export default App;
In your routes.js, try to change following:
From:
import { Router, Route, Switch } from 'react-router';
To:
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
I started off thinking this was going to be an easy issue; however I was wrong. I have the following home page:
import React,{Component} from "react";
import {Link} from "react-router-dom";
const Home = (props) =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
}
export default Home;
My main component looks like this: I am certain it is NOT what it is supposed to look like:
import React, {Component} from "react";
import {Router, Route, Link} from "react-router-dom";
import Login from './login/login';
import Home from './home/home';
const Main = (props) =>{
return(
<Router>
<div>
<Route path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</Router>
);
};
export default Main;
Finally my index:
import React from 'react';
import ReactDOM from 'react-dom'
import Main from "./main";
import './index.css';
ReactDOM.render(<Main />,document.getElementById('root'));
When I enter the site address, the home pages does not show and I get errors (warnings):
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at main.js:11)
I am OBVIOUSLY doing this wrong, but my goal is to have a home page with a link to my login page. Assistance is greatly appreciated.
Try the following:
Main.js
import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import Login from './Login';
import Home from './Home';
const Main = () =>{
return(
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</BrowserRouter>
);
};
export default Main;
Home.js
import React from "react";
import {Link} from "react-router-dom";
const Home = () =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
};
export default Home;
Login.js
import React from "react";
const Login = () =>{
return(
<div>
Login
</div>
);
};
export default Login;
Made a CodeSandbox, hopefully this helps
CodeSandbox
Main.js
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Main = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
);
const Home = () => (
<div>
<h2> Home </h2>
</div>
);
const Login = () => (
<div>
<h2> Login Page </h2>
</div>
);
export default Main;
Basically, I am learning React Routing with react-router-dom, version 5.0.0 and I have some components like Home, About, Contact etc. and I am trying to change each component by clicking on NavLink but not changing components just changing URL
Indexjs:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './Style.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Header from "./components/Header";
import Footer from "./components/Footer";
import Web from "./Web";
ReactDOM.render(
<React.Fragment>
<Header />
<Web />
<Footer />
</React.Fragment>
, document.getElementById('root'));
serviceWorker.register();
Web Componet:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch,withRouter} from "react-router-dom";
//import Route from 'react-router-dom/Route';
import {Home} from "./components/Home";
import {About} from "./components/About";
import {Contact} from "./components/Contact";
import {Products} from "./components/Products";
class Web extends Component {
render() {
return (
<Router>
<Switch>
<Route path={"/"} exact component={withRouter(Home)}/>
<Route path={"/products"} component={withRouter(Products)}/>
<Route path={"/about"} component={About}/>
<Route path={"/contact"} component={Contact}/>
<Route path={"/something"} render={
() => {
return (<h1>This is something page</h1>);
}
}/>
</Switch>
</Router>
);
}
}
export default Web;
Header Component:
import React, { Component } from 'react';
import logo from '../logo.jpg';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect} from "react-router-dom";
class Header extends Component {
render() {
return(
<Router>
<header className={'header_area'}>
<div className="container">
<div className="logo">
<img src={logo} alt="logo"/>
</div>
<nav className={'main_nav'}>
<ul>
<li><NavLink to="/" activeStyle={{color:"green"}} exact>Home</NavLink></li>
<li><NavLink to="/products" activeStyle={{color:"green"}} exact>Products</NavLink></li>
<li><NavLink to="/about" activeStyle={{color:"green"}} exact>About</NavLink></li>
<li><NavLink to="/contact" activeStyle={{color:"green"}} exact>Contact</NavLink></li>
</ul>
</nav>
<div className="float_clear"></div>
</div>
</header>
</Router>
);
}
}
export default Header;
Home Component:
import React from 'react';
export class Home extends React.Component {
render() {
return (
<React.Fragment>
<article className={'article_area'}>
<div className="container article">
<h2>Home</h2>
</div>
</article>
</React.Fragment>
);
}
}
About Component:
import React from 'react';
export class About extends React.Component {
render() {
return (
<React.Fragment>
<article className={'article_area'}>
<div className="container article">
<h2>About us</h2>
</div>
</article>
</React.Fragment>
);
}
}
Can anyone help me?
You should use a single Router and all of your routes and links should have it as one of their parents.
Change your index:
<React.Fragment>
<Router>
<Header />
<Web />
<Footer />
</Router>
</React.Fragment>
and remove other <Router>s
Also you do not need to use withRouter for components inside Route. They will get react-router props directly.