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
Related
I am using VSCode to create a react app, I have multiple folders as shown in the first image:
This is my App.jsx
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Note from "./components/Note";
function App() {
return (
<div>
<Header />
<Footer />
<Note />
</div>
);
}
export default App;
This is my Index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.document.getElementById("root"));
reportWebVitals();
This is my Header.jsx
import React from "react";
function Header() {
return (
<header>
<h1>Keeper</h1>
</header>
);
}
export default Header;
This is my Footer.jsx
import React from "react";
function Footer() {
const date = new Date();
const curretYear = date.getFullYear();
return (
<footer>
<p>copyright ⓒ {curretYear}</p>;
</footer>
);
}
export default Footer;
I am trying to learn react on VSCode, the same code works on Codesandbox, but I can't get it to work on my VSCode, and I am not getting any errors in the terminal. I am learning React and I would like the help.
Your import paths in App.jsx appear to be wrong try ./Header etc. Remember that import paths are relative and since the imported modules are on the same level as App.jsx, you don't need to go through the components folder
I have a menu with a "login" link to open to the login page. When I click on the "login" link it does nothing...doesn't open page, just empty click. My expectation was that the login page would be displayed. I am using an existing html template that uses UL lists for the menu. I'd like to keep using the UL list for the menu, if possible, as it fits in the existing CSS and layout of the page nicely.
I've researched react-router-dom, links, routes, etc for the last 3 hours...I can't find a solution for this, I see how others made it work somehow for their project, but when I try the solutions in my project it doesn't work for me...perhaps I've got something out of order? I'm new to react, but have read/watched a bunch of tutorials and would welcome any advice or guidance.
The problem appears to be inside "HeaderMenu.js". I've included the details of the components. thanks in advance.
The rendered anchor tag looks like this after React renders it:
Login
Here is how the project is set up:
Folder Structure
/src/Index.js
/src/App.js
/src/components/Home.js
/src/components/header.js
/src/components/HeaderMenu.js
/src/components/Login.js
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.js
import './App.css';
import Home from "./components/Home";
function App() {
return (
<>
<Home />
</>
);
}
export default App;
Home.js
import Header from "./header";
import Body from './body';
import Footer from "./footer";
const Home = () => {
return (
<div className="page-container">
<Header />
<Body />
<Footer />
</div>
);
}
export default Home;
header.js
import React from 'react';
import HeaderMenu from "./HeaderMenu";
const Header = () => {
return <>
<header className="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div className="container">
<div className="row">
<div className="col-12">
<nav className="main-nav">
<HeaderMenu />
</nav>
</div>
</div>
</div>
</header>
</>
}
HeaderMenu.js
import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Login from './Login';
const HeaderMenu = () => {
return (
<>
<ul className="nav">
<li className="scroll-to-section"><a href="#top" className="active" >Home</a></li>
<li className="scroll-to-section">About Us</li>
<li className="scroll-to-section">Services</li>
<li className=""><Link to={"/Login"}>Login</Link></li>
<li className="scroll-to-section"><div className="main-red-button">Contact Now</div></li>
</ul>
</>
)
}
export default HeaderMenu;
Login.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const Login = () => {
return (
<div>
<h1> Login Page </h1>
</div>
);
};
export default Login;
You have to define routes. Like on which route, which component has to be render. For example: for "/login" you want to define a route in "app.js" file. Like below:
import "./App.css";
import Home from "./components/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import all page components like following
// import Login from "./components/Login";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;
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;
I am a beginner in React and trying to understand routing. I have created a learning project and want to render three different components each with a different path. However, all the paths result in the display of the App component.
I've tried finding solutions on multiple sources, but not able to figure out the issue! Please have a look. Thanks in advance.
Root.jsx
import React, { Component } from 'react';
import { Router } from 'react-router';
import { Redirect, Route, Switch } from 'react-router-dom';
import ScreensList from './List';
import ScreensWeather from './Weather';
import App from '../App';
const ScreensRoot = () => (
<Router>
<Switch>
<Route exact path='/' component={App}/>
<Route path="/list" component={ScreensList} />
<Route path="/weather" component={ScreensWeather} />
</Switch>
</Router>
);
export default ScreensRoot;
App.js
import React, {Component} from 'react';
import './App.css';
class App extends React.Component {
render(){
return (
<div>
Hello from App!
</div>
)
}
}
export default App;
List.jsx
import React from 'react';
import List from '../components/List';
const ScreensList = () => (
<div>
<List/>
</div>
);
export default ScreensList;
List.jsx
import React from 'react';
const List = (
<div>Hello from List Component!</div>
);
export default List;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './screens/Root';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
1.Insted of
import { Router } from 'react-router';
use
import { BrowserRouter as Router } from "react-router-dom";
2.change
const List = (
<div>Hello from List Component!</div>
);
to
const List = () => (
<div>Hello from List Component!</div>
);
3. As others mentioned
ReactDOM.render(<ScreensRoot />, rootElement);
Temporary codesandbox
As far as I can see, you've defined a ScreensRoot component but you're not using anywhere. Assuming you want that to be the actual root of your project, then in your index.js you must use it instead of App:
ReactDOM.render(<ScreensRoot/>, document.getElementById('root'));
(Note that you'll need to import ScreensRoot in your index.js in order for this to work).
Its a very simple sample, where navigation of pages works with browser arrows and Manually accessing Pages. But when clicking on Link, component is not getting rendered. What could be the issue, how to identify!!!
Here is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>First application</title>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<div id="App">
<div class="container" id="AppContainer"></div>
</div>
<script src="../node_modules/react/dist/react.js"></script>
<script src="../node_modules/react-dom/dist/react-dom.js"></script>
<script src="../node_modules/react-router/umd/react-router.min.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
Index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Scripts/AppContainer.jsx';
import { HashRouter } from 'react-router-dom'
ReactDOM.render((
<HashRouter>
<App/>
</HashRouter>
), document.getElementById('AppContainer')
);
AppContainer.jsx:
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, browserHistory, Route, Link } from 'react-router-dom';
import Header from './Header.jsx';
import Main from './Main.jsx';
class App extends React.Component{
render() {
return(
<div>
<Header/>
<Main/>
</div>
);
}
}
export default App
Header.jsx:
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link, hashHistory} from 'react-router-dom';
import Home from './Home.jsx';
import About from './About.jsx';
class Header extends React.Component{
render() {
return(
<header>
<Router>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/About'>About</Link></li>
</ul>
</nav>
</Router>
</header>
);
}
}
export default Header
Main.JSX:
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, browserHistory, Route, Link , hashHistory } from 'react-router-dom';
import Home from './Home.jsx';
import About from './About.jsx';
class Main extends React.Component{
render() {
return(
<main>
<Router >
<div>
<Route exact path="/" component={Home}/>
<Route path="/About" component={About}/>
</div>
</Router>
</main>
);
}
}
export default Main
About.jsx:
import React from 'react';
import ReactDom from 'react-dom';
class About extends React.Component{
render() {
return <div> <h2>About</h2> </div>
}
}
export default About
Home.jsx:
import React from 'react';
import ReactDom from 'react-dom';
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
export default Home