use React nested route, Home is the parent and News is the child. under root directory,there is "src" folder, in "src", is "pages" folder, in "pages", are "Home" and "News" folder. In "News", there is index.js:
Directory Structure :
| src/
| -- pages/
| ----- Home/
| --------index.js
| ----- News/
| --------index.js
| -- App.js
News/index.js
import React from 'react'
export default class News extends React.Component {
render(){
return(
<div style={{backgroundColor:'green',padding:10}}>
this is content of child subcomponent
</div>
)
}
}
Home/index.js
import React from 'react'
import {BrowserRouter as Router,Route,Routes} from 'react-router-dom'
import News from '../News'
export default class Home extends React.Component {
render(){
return(
<div style={{backgroundColor:'skyblue',padding:10}}>
home
<Routes>
<Route path = '/home/news' element={<News/>}></Route>
</Routes>
</div>
)
}
src/App.js
import './App.css';
import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
import {Button} from 'antd-mobile'
import Home from './pages/Home'
import CityList from './pages/CityList'
import React from 'react';
function App() {
return (
<Router>
<div className="App">
<ul>
<li><Link to='/home'>home</Link></li>
<li><Link to='/citylist'>citylist</Link></li>
</ul>
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path='/citylist' element = {<CityList/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
when the program running, as the web site is http://localhost:3000/home,it is ok, but when I add news after the website, http://localhost:3000/home/news , the child component has not been shown correctly, that is no "this is content of child subcomponent" displayed, could you please tell me why and how to solve it.
I guess you are probably using react router 6. In that case you need to use Outlet in order to render nested child routes.
import React from "react";
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";
import "./styles.css";
function News() {
return (
<div style={{ backgroundColor: "green", padding: 10 }}>
this is content of child subcomponent
</div>
);
}
function Home() {
return (
<div style={{ backgroundColor: "skyblue", padding: 10 }}>
home
{
// Render child route.
}
<Outlet />
</div>
);
}
function CityList() {
return (
<div>
<p>City list</p>
</div>
);
}
export default function App() {
return (
<BrowserRouter>
<div className="App">
<ul>
<li>
<Link to="/home">home</Link>
</li>
<li>
<Link to="/citylist">citylist</Link>
</li>
</ul>
<Routes>
<Route path="/home" element={<Home />}>
{
// Nested Child Route.
}
<Route path="news" element={<News />} />
</Route>
<Route path="/citylist" element={<CityList />} />
</Routes>
</div>
</BrowserRouter>
);
}
Related
I am trying to create a new react routes according to the props of components.
App.js routes the landing page to the Home component.
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<div>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
export default App;
I have service card file where I want to create new routes according to props.
Like for example
route = lorem -> /services/lorem
route = ipsum -> /services/ipsum
Servicecard looks like this
import React from "react";
import "../css/servicecard.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
const ServiceCard = ({ text, subClass, image, route }) => {
return (
<>
<div className={`card-container ${subClass}`} data-aos="fade-up">
<span className="card-title">{text}</span>
<img src={image} alt="service-icon" />
</div>
</>
);
};
export default ServiceCard;
i think you are talking about route params, here is an example:
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Switch>
<Route path="/:param" children={<Child />} />
</Switch>
</div>
</Router>
);
}
and in the component child:
function Child() {
let { param } = useParams();
return (
<div>
<h3>ID: {param}</h3>
</div>
);
}
I have a problem with my page that I build. There is main route path like "/" where is all page but there is also route path "/privacy" where you can go by clicking button "Privacy policy". Main navigation and footer with navigation are displaying at "/" and "/privacy" also.
It looks like this:
<Route exact path="/">
<Header />
<Main />
<Footer />
</Route>
<Route path="/privacy">
<Header />
<Privacy />
<Footer />
</Route>
The Main component looks like this
const Main = () => {
return (
<>
<Hello />
<Services />
<Projects />
<About />
<Contact />
</>
)}
All buttons in nav are react-scroll links.
<ul>
<li><Link to="header" smooth="true" duration={1000}>Main</Link></li>
<li><Link to="services" smooth="true" duration={1000}>Services</Link></li>
<li><Link to="webdev" smooth="true" duration={1000}>Portfolio</Link></li>
<li><Link to="about" smooth="true" duration={1000}>About</Link></li>
<li><Link to="contact" smooth="true" duration={1000}>Contact</Link></li>
</ul>
How can I redirect user from "/privacy" and scroll to - for example - about component at my "/" route path when he clicks "About" button in nav?
Example:
User is at "/privacy" and he wants to read "About" section, so he clicks button "About" in nav and then website is redirecting to "/" and scrolling to "About" section.
So. Add to component / root element of component about id="about" and then in your link set path <Link to="/#about"......
You can find info how to make links to content on the same page here (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
I used HashLink from the library react-router-hash-link. I simulated the home sections with two components Component1 and Component2 in order to make it more generic.
It's necessary install two packages
npm install react-router-dom
npm install react-router-hash-link
Here is the code:
Set the routes in the App.jsx
App.jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./components/Home";
import { Component0 } from "./components/Component0";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/component0" element={<Component0 />} />
</Routes>
</Router>
);
}
export default App;
Home contains Component1 and Component2 and a button for navigating to Component0
Home.jsx
import React from 'react';
import { Component1 } from './Component1';
import { Component2 } from './Component2';
import { HashLink } from 'react-router-hash-link';
export const Home = props =>
{
return (<>
<HashLink to="/component0">
<button>Button component 0</button>
</HashLink>
<Component1/>
<Component2/>
</>);
}
The Component0 is a separated section from which we can navigate to Component1 or Component2 by scrolling within the Home component. To navigate we use the HashLink with a wrapped button
Component.jsx
import React from 'react';
import { HashLink } from 'react-router-hash-link';
export const Component0 = props =>
{
return (<>
<HashLink smooth to="/#section-component1">
<button>Component1</button>
</HashLink>
<HashLink smooth to="/#section-component2">
<button>Component2</button>
</HashLink>
</>);
}
Component1 and Component2
Component1.jsx
import React from 'react';
import "./Component1.css"
export const Component1 = props =>
{
return (<>
<section id="section-component1">
<h1>Section of component 1</h1>
</section>
</>);
}
Component2.jsx
import React from 'react';
import "./Component2.css"
export const Component2 = props =>
{
return (<>
<section id="section-component2">
<h1>Section of component 2</h1>
</section>
</>);
}
Repo: https://github.com/JCaeta/react-navigation
I am trying to display text in h1 tags but only about but about.js displays text. First one is shop.js component and second file is app.js file.
import React from 'react';
import './App.css';
function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
export default Shop;
My App component:
import React from 'react';
import Nav from './Nav';
import Shop from './Shop';
import About from './About';
import Home from './Home';
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Router path="/" exact component={Home} />
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Your routes and the Shop component itself look fine, so I'm guessing you just forgot to export the Shop component:
export function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
try adding shop route before home route like this:
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
<Router path="/" exact component={Home} />
i have created a code expample here
so i had a navbar component that has a <Link></Link> inside of it the problem in i couldn't use that link for the router (it wont refresh) when i clicked on it although the link appears on the URL but it didn't refresh
here's the code
import React, { Component } from 'react'
import {BrowserRouter as Router} from 'react-router-dom'
import Route from 'react-router-dom/Route'
import Nav from './Nav'
export class App extends Component {
render() {
return (
<div className="App">
<Router>
{/* NAVBAR */}
<Nav />
<Route path="/" exact render={
() => <h1>home</h1>
}/>
<Route path="/about" exact render={
() => <h1>about</h1>
}/>
<Route path="/author" exact render={
() => <h1>author</h1>
}/>
</Router>
</div>
)
}
}
export default App
and here's the navbar code
import React, { Component } from 'react'
import styles from './Nav.module.css'
import {BrowserRouter as Router} from 'react-router-dom'
import {Link} from 'react-router-dom'
export class Nav extends Component {
render() {
return (
<Router>
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
</Router>
)
}
}
export default Nav
I'm assuming it's because it's not on the same <Router></Router> but does anyone have a way to make this work?
You're creating a new <Router>, which has no defined <Route> elements within it. Remove that router:
export class Nav extends Component {
render() {
return (
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
)
}
}
Each component doesn't need its own <Router>, as long as they're all contained within (descendants of) the one defined in <App>.
js and am using react-router-dom.
Say I have 2 files - 1. dashboard.js file
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
</div>
);
}
}
Note the ul with id="DASHBOARD-MENU" above
2nd - wysiwyg.js file
import React, { Component } from 'react';
export default class Wysiwyg extends Component{
render(){
return(
<div id="WYSIWYG-CONTAINER">
</div>
);
}
}
Note the div with id="WYSIWYG-CONTAINER" in the above snippet
My problem is:
After redirection to WYSIWYG container from my dashboard, I can still see the - <ul id="DASHBOARD-MENU" .. rendered below the <div id="WYSIWYG-CONTAINER ...
What I understood - is the component WYSIWYG is rendered replacing <Route declared in my dashboard.js file.
What I want:
I don't want the "DASHBOARD-MENU" element to render in my "WYSIWYG" page.
Is it possible?
The desired behavior can be obtained by considering both as different routes, and hence rendering only one of them depending on the path:
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
const Dashboard = () => (
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
);
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
</div>
);
}
}