I have a trouble with correct routing in React project.
When I go into "Heroes" route, there is a list of "heroes" (this is a blog).
I can open a document by id-made link.
When I open the document, and then click on "Heroes", it is not rendered. It will render if I only the first open the main page or "about", and then open "Heroes".
Maybe someone can tell me, how to fix this, looking at the code below.
Will be very grateful for any help!
App.jsx
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import Heroes from './components/Heroes';
import About from './components/About';
class App extends Component {
render() {
return (
<BrowserRouter>
<>
<Header />
<div className="container">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/heroes" component={Heroes} />
<Route path="/about" component={About} />
</Switch>
</div>
</>
</BrowserRouter>
);
}
}
const Header = () => (
<nav>
<div className="container">
<div className="nav-wrapper">
<Link to="/" className="brand-logo">
<i className="material-icons">home</i>
</Link>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>
<Link to="/heroes">Heroes</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
);
const Home = () => (
<>
<h3>Fullstack Express-Apollo-React</h3>
</>
);
export default App;
Heroes.jsx
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import Hero from './Hero';
const mockData = {
"heroes": [
{
"_id": "5db31d0c5419031a7c8d749c",
"title": "qqqqqqqqqqqqqqq",
"description": "ljlkjlkjlkj",
"date": "1572019076651"
},
{
"_id": "5db331e25419031a7c8d749d",
"title": "gfdgfdhgfdhgfdgf",
"description": "yuytruytrytryt",
"date": "1572019076651"
},
{
"_id": "5db332405419031a7c8d749e",
"title": "mnbvmnbvmnbvnbvmn",
"description": "eytretretretretr",
"date": "1572019076651"
}
]
}
class Heroes extends Component {
render() {
return (
<div>
<BrowserRouter>
<Switch>
{mockData.heroes.map(hero => (
<Route
exact
path={`/heroes/${hero._id}`}
render={() => <Hero data={hero} />}
/>
))}
<Route
exact
path="/heroes"
component={Home}
/>
</Switch>
</BrowserRouter>
</div>
);
}
}
const Home = () => {
return (
<>
{mockData.heroes.map(hero => (
<div key={hero._id}>
<Link to={`/heroes/${hero._id}`}>
<h3>{hero.title}</h3>
</Link>
<h5>{hero.description}</h5>
<h5>{hero.date}</h5>
</div>
))}
</>
);
};
export default Heroes;
Hero.jsx
import React, { Component } from 'react';
class Hero extends Component {
render() {
return (
<>
<h5>{this.props.data.title}</h5>
<h5>{this.props.data.description}</h5>
</>
);
}
}
export default Hero;
If necessary, here is the link to github repository:
react-homework
Thanks in advance!
Your Heroes component has route
<Route
exact
path="/heroes"
component={Home}
/>
that is pointing towards Home component, while in App it is pointing to Heroes <Route path="/heroes" component={Heroes} /> Could be the cause of your issue
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import About from './components/About';
import Hero from './components/Hero';
const mockData = {
"heroes": [
{
"_id": "5db31d0c5419031a7c8d749c",
"title": "qqqqqqqqqqqqqqq",
"description": "ljlkjlkjlkj",
"date": "1572019076651"
},
{
"_id": "5db331e25419031a7c8d749d",
"title": "gfdgfdhgfdhgfdgf",
"description": "yuytruytrytryt",
"date": "1572019076651"
},
{
"_id": "5db332405419031a7c8d749e",
"title": "mnbvmnbvmnbvnbvmn",
"description": "eytretretretretr",
"date": "1572019076651"
}
]
}
class App extends Component {
render() {
return (
<BrowserRouter>
<>
<Header />
<div className="container">
<Switch>
<Route path="/" exact component={Home} />
{mockData.heroes.map(hero => (
<Route
exact
path={`/heroes/${hero._id}`}
render={() => <Hero data={hero} />}
/>
))}
<Route
exact
path="/heroes"
component={heroesIndex}
/>
<Route path="/about" component={About} />
</Switch>
</div>
</>
</BrowserRouter>
);
}
}
const Header = () => (
<nav>
<div className="container">
<div className="nav-wrapper">
<Link to="/" className="brand-logo">
<i className="material-icons">home</i>
</Link>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>
<Link to="/heroes">Heroes</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
);
const heroesIndex = () => {
return (
<>
{mockData.heroes.map(hero => (
<div key={hero._id}>
<Link to={`/heroes/${hero._id}`}>
<h3>{hero.title}</h3>
</Link>
<h5>{hero.description}</h5>
<h5>{hero.date}</h5>
</div>
))}
</>
);
};
const Home = () => (
<>
<h3>Fullstack Express-Apollo-React</h3>
</>
);
export default App;
Related
I'm trying to create my first website, but having issues with redirection to another page. I added Routes to App.jsx, and added links to Navbar; clicking on "Services" in Navbar goes to "/services", but the page doesn't show anything, only Navbar.
I also tried with NavLink, but it did't change anything. Please help me figure out what the problem is.
import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';
const App = () => {
return (
<div>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
</BrowserRouter>
</div>
)
}
export default App
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(false);
return (
<div>
<div className='navbar'>
<Link style={{textDecoration:"none"}} to="/">
<img src={MainLogo} alt="main_logo" className="navbar_logo"/>
</Link>
<ul className='navbar_links'>
<li>
<Link to="/services">Services</Link>
</li>
<li>
<Link to="/samples">Samples</Link>
</li>
<li>
<Link to="/">Reviews</Link>
</li>
<li>
<Link to="#gallery">Gallery</Link>
</li>
<li>
<Link to="#about">About Us</Link>
</li>
<li>
<Link to="#contacts">Contacts</Link>
</li>
</ul>
</div>
There is no issue with the routing. The issue here is that the navbar uses fixed positioning and the "/services" route content is rendered under the navbar.
Give the App component some top margin to push the content down below the navbar.
Example:
const App = () => {
return (
<div className='app'> // <-- app container
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
{/* <Reviews /> */}
</BrowserRouter>
</div>
)
}
app.css
.app {
margin-top: 93px; // <-- header/navbar height
}
I added {BrowserRouter} to index.js, and it worked
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
I am getting the below error. I have installed npm install react-router-dom on the command prompt. Here is my code for app.js and index.js
Error:
A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
Please let me know what additionally I have to add to make the code work
**App.Js**
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
};
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W3Adda - Simple SPA</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
What is the error when you wrap your Route with a Routes?
<Routes>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Routes>
Try this; (change component to element)
import { BrowserRouter as Router, Routes, Route } from "react-router-
dom";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/user" element={<CreateUser/>}/>
</Routes>
</Router>
);}
I have a multipage app deployed to gh-pages. Whenever i refresh the page i get an error 404. Can someone help me with this? I'm fairly new to making multipage sites and this is confusing me! everything else seems to work but this one problem.
How would i fix this to route correctly?
[VIEW SITE HERE!][1]
[Sources for code here][2]
**App.js**
import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./Navbar/Navbar";
import Home from "./Navbar/Home";
// import Contact from "./Navbar/Contact";
import Gallery from "./Navbar/Gallery";
import Investment from "./Navbar/Investment";
import Projects from "./Navbar/Projects";
import Footer from "./Footer/Footer";
import About from "./About";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route path="/photo-gallery" element={<Home />} exact></Route>
<Route path="/about" element={<About />} exact></Route>
{/* <Route path="/contact" element={<Contact />} exact></Route> */}
<Route path="/gallery" element={<Gallery />} exact></Route>
<Route path="/investment" element={<Investment />} exact></Route>
<Route path="/projects" element={<Projects />} exact></Route>
</Routes>
</Router>
<Footer />
</div>
);
}
export default App;
**Navbar.js**
import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";
const Navbar = () => {
const [isMobile, setIsMobile] = useState(false);
return (
<nav className="nav-bar">
<h1>Noah Nigel </h1>
<ul
className={isMobile ? "nav-links-mobile" : "nav-links"}
onClick={() => setIsMobile(false)}
>
<Link to="/photo-gallery" className="home">
<li>Home</li>
</Link>
<Link to="/about" className="about">
<li>About</li>
</Link>
<Link to="/Gallery" className="gallery">
<li>Gallery</li>
</Link>
<Link to="/investment" className="investment">
<li>Investment</li>
</Link>
<Link to="/projects" className="projects">
<li>Code</li>
</Link>
{/* <Link to="/contact" className="contact">
<li>Contact</li>
</Link> */}
</ul>
<button className="mobile-menu"
onClick={() => setIsMobile(!isMobile)}
>
{isMobile ? (
<ion-icon name="close-outline"></ion-icon>
) : (
<ion-icon name="menu-outline"></ion-icon>
)}
</button>
</nav>
);
};
export default Navbar;
[1]: https://noahfarinas.github.io/photo-gallery/
[2]: https://github.com/noahfarinas/photo-gallery
In React(v16.13.1), The URL is changing but page is not loading.
I found the similar questions ReactJS - React Router not changing component but url is changing
and React Router URL Change but Not Component in stack and i tried from different ways but none helps me.
It may be a small mistake, Please help to rectify this.
My code follows:
App.js file
import React, { Component } from "react";
import { BrowserRouter as Router, Route,Switch,Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";
class App extends React.Component {
render() {
return (
<div>
<TopNav />
<SideNav />
<Router>
<Switch>
<Route exact path="/">
<Dashboard />
</Route>
<Route exact path="/analytics">
<Analytics />
</Route>
{/* <Route exact path="/analytics" component={Analytics}></Route> */}
<Route exact path="/todo">
<ToDo />
</Route>
<Redirect to="/"></Redirect>
</Switch>
</Router>
</div>
);
}
}
export default App;
SideNav.js page as follows:
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
class SideNav extends React.Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
<Router>
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes"></i>
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart"></i>
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit"></i>
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
</Router>
</div>
</div>
);
}
}
export default SideNav;
Thanks in advance!
You only need one <Router> at top level of your app.
You are already using <Router> in your App component.
Wrap the SideNav component in the Router and remove the Router used in SideNav.
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
Link
} from "react-router-dom";
class SideNav extends Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
{/* <Router> */}
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes" />
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart" />
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit" />
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
{/* </Router> */}
</div>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<Router>
<SideNav />
<Switch>
<Route exact path="/">
<div>/</div>
</Route>
<Route exact path="/analytics">
<div>ana</div>
</Route>
<Route exact path="/todo">
<div>todo</div>
</Route>
<Redirect to="/" />
</Switch>
</Router>
</div>
);
}
}
export default App;
Your <SideNav /> and the main content are in seperate <Router />s. They don't see each other, and they can't work together.
Think, like two iframes navigaing independantly of each other, just without the actual iframes.
Everything that reqiures the router, basically your entire app, needs to be inside a single <Router />.
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";
class App extends React.Component {
render() {
return (
<Router>
<TopNav />
<SideNav />
<Switch>
<Route exact path="/">
<Dashboard />
</Route>
<Route exact path="/analytics">
<Analytics />
</Route>
{/* <Route exact path="/analytics" component={Analytics}></Route> */}
<Route exact path="/todo">
<ToDo />
</Route>
<Redirect to="/"></Redirect>
</Switch>
</Router>
);
}
}
export default App;
SideNav.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
class SideNav extends React.Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes"></i>
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart"></i>
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit"></i>
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
</div>
</div>
);
}
}
The same applies for the TopNav.js.
I'm trying the simplest code to understand the React Router.
I brought the example of the site: "https://reacttraining.com/react-router/web/example/basic" and only changed one thing, the component 'About'.
import React from 'react'
import ReactDOM from 'react-dom'
import registerServiceWorker from './registerServiceWorker'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about/:aaa" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
class About extends React.Component {
render() {
return (
<div>
<h2>About</h2>
</div>
);
}
}
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
Rendering with React
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
Components
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic}/>
<Route exact path={match.url} render={() => (
<h3>Please select a topic.</h3>
)}/>
</div>
)
console.log('Topics', Topics);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
export default BasicExample
ReactDOM.render(<BasicExample />, document.getElementById('root'));
registerServiceWorker();
If i use:
class About extends React.Component {
render() {
return (
<div>
<h2>About</h2>
</div>
);
}
}
React-router do not show this component. and why i want to use this? because with this i can use State.
Now i'm reading this article: https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
Maybe i will find the answer there. then i will come and edit...