I am struggling to see why nothing shows up when I use a router in my project (Just a blank screen). I simply installed react-router-dom as normal. I have tried changing the versions but haven't had any success
Here is the app.js file
import React from 'react';
import './App.css';
import navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<navbar />
<Routes>
<Route path="/" element={<navbar/>}/>
</Routes>
</Router>
);
}
export default App;
And here is the navbar.js file:
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'>
TRL<i className='fab fa-typo3'/>
</Link>
</div>
</nav>
);
}
export default navbar;
In JSX, lower-case tag names are considered to be HTML tags.
That's why you need to capitalize the name of your navbar component otherwise react.js won't treat it like other valid JSX. It should be imported as Navbar.
So, your App.js will look something like this.
import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Navbar/>}/>
</Routes>
</Router>
);
}
export default App;
Try to make the navbar component capital as Navbar , you can also pass element={Navbar} directly.
You need to Capitalize the name of your component for the JSX to understand it.
JSX won't know if that is an HTML tag or a valid JSX in this case a component.
Nav js
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'>
TRL<i className='fab fa-typo3'/>
</Link>
</div>
</nav>
);
}
export default Navbar;
App js
import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Navbar/>}/>
</Routes>
</Router>
);
}
export default App;
Related
'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 am trying to create a Navbar on a clean React app (with React-Router-Dom) and for some reason I am just getting a blank screen, as far as I can see and from looking up various guides, it should be fine:
App.js:
import React from "react";
import Navbar from "./components/Navbar";
function App() {
return (
<Navbar/>
);
}
export default App;
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')
);
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = ()=>{
return(
<nav className = "nav-wrapper">
<div className="container">
<Link to="/" className="brand-logo">Potter Books</Link>
<ul className="right">
<li><Link to="/">Shop</Link></li>
<li><Link to="/">Cart</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
There are multiple ways to fix that.
What I mostly like to use BrowserRouter into the App.js
modify your app.js file by importing BrowserRouter
import {
BrowserRouter,
} from "react-router-dom";
And then add this in the App function.
function App() {
return (
<BrowserRouter>
<Navbar/>
<BrowserRouter/>
);
}
export default App;
For more information, you can consult this page as well.
So to fix this you need to add
import {BrowserRouter as Router} from "react-router-dom";
into Index.js
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>
</>
);
}
I want the page to change when you click on one of the two boxes. The problem is that the URL changes as it is supposed to but page content remains and only changes after refreshing. I read some similar questions and tried adding withRouter and that produced the same results. Here's the code:
import React from 'react';
import './App.css';
import NavBar from './Nav.js';
import Library from './PathwayHome.js';
import Profile from './ProfileHome.js';
import Home from './HomePage.js';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App () {
return (
<Router>
<div className="Home">
<NavBar/>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/ProfileHome" exact component={Profile}/>
<Route path="/PathwayHome" exact component={Library}/>
</Switch>
</div>
</Router>
);
}
export default App;
This is the component with the links:
import React from 'react';
import SearchBar from './SearchBar';
import './App.css';
import Footer from './FooterHome.js';
import Profile from './ProfileHome.js';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import {Grid} from '#material-ui/core';
function Home () {
return (
<Router>
<Grid container spacing={12}>
<div className="PaneContainer">
<Link to="/ProfileHome"><div className="Profile"/></Link>
<Link to="/PathwayHome"><div className="Pathway"/></Link>
</div>
<SearchBar/>
<Footer/>
</Grid>
</Router>
);
}
export default Home;
What am I doing wrong? I'm starting to wonder if maybe a multi-page webapp would be better for my use case and I should not use React? Thoughts/Suggestions?
I'm a quite beginner to React and Redux...I need to use Match object in my application...but I'm getting the following error..
Attempted import error: 'Match' is not exported from 'react-router'.
Same error is given when tried with 'react-router-dom' as well.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Link} from 'react-router-dom'
import {Match} from 'react-router';
import GamesPage from './GamesPage'
//import './reducers/games'
function App() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</div>
<p>
<Link to="games">Games</Link>
</p>
<Match pattern="/games" component={GamesPage} />
</div>
);
}
export default App;
Match was component in the alpha release of React Router v4.
In the beta, Match has been renamed Route (and its props have changed so that pattern is now path and exactly is exact).Instead you should use a Switch statement, which will only render the first Route (or Redirect) that is matched. You can add a pathless component as the last child of the Switch's routes and it will render when none of the preceding Route's match.
You can check out the API documentation for more details.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {NavLink, Route} from 'react-router-dom'
import GamesPage from './GamesPage'
//import './reducers/games'
function App() {
return (
<div className="App">
<div className="App-header">
Sample application of react router dom
</div>
<Router>
<NavLink to="/games">Games</NavLink>
<Switch>
<Route path="/games" component={GamesPage} />
</Switch>
</Router>
</div>
);
}
export default App;