I have a dynamic route set up like so:
import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import DesktopHome from './DesktopHome'
import WhoWeAre from './WhoWeAre'
import WhatWeDo from './WhatWeDo'
import Articles from './Articles'
import Article from './Article'
import NotFound from './NotFound'
...
<Router>
<Switch>
<Route exact path='/' render={(props) => <DesktopHome {...props} api={this.state.api} acctok={this.state.acctok} />} />
<Route path='/who-we-are' render={(props) => <WhoWeAre {...props} api={this.state.api} acctok={this.state.acctok} />} />
<Route path='/what-we-do' render={(props) => <WhatWeDo {...props} api={this.state.api} acctok={this.state.acctok} />} />
<Route path='/articles/:id' component={(props) => <Article {...props} api={this.state.api} acctok={this.state.acctok} />} />
<Route path='/articles' render={(props) => <Articles {...props} api={this.state.api} acctok={this.state.acctok} />} />
<Route path='/not-found' component={NotFound} />
<Route component={NotFound} />
</Switch>
</Router>
The above code is for a navbar, when I go to 'articles/whatever' it works fine, however whenever that component renders if I try any of the links in the navbar I get 'articles/articles/whatever-component-route'
What I want to get is '/whatever-component-route'
edit
Added the component that displays the menu
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
class Menu extends Component {
render() {
return (
<div className='menu'>
<ul>
<Link to='./who-we-are'>
<li>
<div className='menuitem'>
<img src={require('./img/Menu Items-02.svg')} />
</div>
<h2>Who we are</h2>
</li>
</Link>
<Link to='./what-we-do'>
<li>
<div className='menuitem'>
<img src={require('./img/Menu Items-04.svg')} />
</div>
<h2>What we do</h2>
</li>
</Link>
<Link to='./articles'>
<li>
<div className='menuitem'>
<img src={require('./img/Menu Items-03.svg')} />
</div>
<h2>Articles</h2>
</li>
</Link>
<Link to='./past-projects'>
<li>
<div className='menuitem'>
<img src={require('./img/Menu Items-05.svg')} />
</div>
<h2>Past projects</h2>
</li>
</Link>
<Link to='./contact'>
<li>
<div className='menuitem'>
<img src={require('./img/Menu Items-01.svg')} />
</div>
<h2>Contact</h2>
</li>
</Link>
</ul>
</div>
)
}
}
export default Menu
Your problem is that you're using . before your routes. Remove the dot from all links and it will instead start at the root. Example:
to="/contact"
Related
so basically I am using the react-router 6.4.2 version in my project and I have a dynamic route called detail/:id and also I made a page for it that loads dynamic data from API and on that page, there is a section that loads similar products to it from API and moreover, each similar products is linked to its URL(detail/productID) so whenever I navigate from any other route like from home to detail/productID then it successfully loads the component but when it's on the same URL/route and I clicked on any similar product the URL is changed but component did not load until I don't refresh the whole page physically
so this is my app.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./Layout/Main";
import Home from "./Pages/Home";
import Detail from "./Pages/Detail";
import Cart from "./Pages/Cart";
import Checkout from "./Pages/Checkout";
import Login from "./Pages/Login";
import Register from "./Pages/Register";
import Forgot from "./Pages/Forgot";
import Thankyou from "./Pages/Thankyou";
import MyAccount from "./Pages/MyAccount";
import OtpVerification from "./Pages/OtpVerification";
// Start Artists pages
import Sidebarlayout from "./Layout/Sidebarlayout";
import Full_layout from "./Layout/Full_layout";
import Artistregister from "./Artists/Register/Artistregister";
import Artistaddress from "./Artists/Register/Artistaddress";
import Artistthanks from "./Artists/Register/Artistthanks";
import Artistverified from "./Artists/Register/Artistverified";
import Artistlogin from "./Artists/Login/Artistlogin";
import Artistforgotpassword from "./Artists/Login/Artistforgotpassword";
import Artistresetpassword from "./Artists/Login/Artistresetpassword";
import Overview from "./Artists/Dashboard/Overview";
import ArtistImages from "./Artists/Dashboard/ArtistImages";
import ArtistVideos from "./Artists/Dashboard/ArtistVideos";
import ArtistMyAccount from "./Artists/Dashboard/MyAccount";
import ArtistEarnings from "./Artists/Dashboard/Earnings";
// admin
import Adminlayout from "./Layout/Adminlayout";
import Adminlogin from "./Admin/Adminlogin";
import Dashboard from "./Admin/Dashboard";
import Customers from "./Admin/Customers";
import Artist from "./Admin/Artist";
import Orders from "./Admin/Orders";
import Adminimages from "./Admin/Adminimages";
import Categories from "./Admin/Categories";
import { useLayoutEffect } from "react";
import Search from "./Pages/Search";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
return (
<BrowserRouter>
<ToastContainer />
<Routes>
<Route path="/" element={<Main />}>
<Route index element={<Home />} />
<Route path="/" element={<Home />} />
<Route path="detail/:id" element={<Detail />} />
<Route path="cart" element={<Cart />} />
<Route path="checkout" element={<Checkout />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="otp_verification" element={<OtpVerification />} />
<Route path="forgot" element={<Forgot />} />
<Route path="myaccount" element={<MyAccount />} />
<Route path="thankyou" element={<Thankyou />} />
<Route path="searched-result" element={<Search/>} />
</Route>
<Route element={<Full_layout />}>
{/* artist start */}
<Route path="/artist/register" element={<Artistregister />} />
<Route path="/artist/thanks" element={<Artistthanks />} />
<Route path="/artist/verified" element={<Artistverified />} />
<Route path="/artist/address" element={<Artistaddress />} />
<Route path="/artist/login" element={<Artistlogin />} />
<Route
path="/artist/forgotpassword"
element={<Artistforgotpassword />}
/>
<Route
path="/artist/resetpassword"
element={<Artistresetpassword />}
/>
{/* artist end */}
{/* admin */}
<Route path="/admin/login" element={<Adminlogin />} />
</Route>
<Route element={<Adminlayout />}>
{/* admin */}
<Route path="/admin/dashboard" element={<Dashboard />} />
<Route path="/admin/customers" element={<Customers />} />
<Route path="/admin/artist" element={<Artist />} />
<Route path="/admin/orders" element={<Orders />} />
<Route path="/admin/images" element={<Adminimages />} />
<Route path="/admin/categories" element={<Categories />} />
</Route>
<Route element={<Sidebarlayout />}>
<Route path="/artist/overview" element={<Overview />} />
<Route path="/artist/images" element={<ArtistImages />} />
<Route path="/artist/videos" element={<ArtistVideos />} />
<Route path="/artist/myaccount" element={<ArtistMyAccount />} />
<Route path="/artist/earnings" element={<ArtistEarnings />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;
and this is detail page
import React, { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import viewImage from "../assets/images/purchase-image.jpg";
import similar1 from "../assets/images/viewall/view1.jpg";
import similar2 from "../assets/images/viewall/view2.jpg";
import similar3 from "../assets/images/viewall/view3.jpg";
import similar4 from "../assets/images/viewall/view4.jpg";
import similar5 from "../assets/images/viewall/view5.jpg";
import similar6 from "../assets/images/viewall/view6.jpg";
import similar7 from "../assets/images/viewall/view7.jpg";
import similar8 from "../assets/images/viewall/view8.jpg";
import { rootStore } from "../Store";
const Detail = () => {
const [provideData, setData] = useState([]);
const [Loading, setLoading] = useState(false);
const [isAddToCart, setisAddToCart] = useState(false);
const parms = useParams();
const { cart, setCart, TotalItems, setTotalItems, subTotal, setsubTotal } = useContext(rootStore);
//fetch perticular user data to show in fields.
useEffect(() => {
async function fetchData() {
let apiBaseUrl = window.location.hostname;
if (apiBaseUrl == "localhost") {
apiBaseUrl = "";
} else {
apiBaseUrl = "https://example.com/api";
}
const settings = {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
u_id: parms.id,
}),
};
setLoading(true);
await fetch(apiBaseUrl + "/image/get_single_home_image_by_u_id", settings)
.then((response) => {
return response.json();
})
.then((res) => {
const provideData = res.data;
setData(provideData);
setLoading(false);
console.log(provideData)
});
}
fetchData();
}, []);
const detail_img = "https://example.com/" + provideData.home_image;
return (
<section className="section detail-section">
<section className="search-images">
<div className="container">
<div className="rows">
<div className="image-box">
<img src={detail_img} alt="view image" width={854} height={564} />
<div className="save-box">
<span><b>{provideData.image_title}</b>, {provideData.image_description}</span>
<button>+save</button>
</div>
</div>
<div className="purchase-box">
<div className="purchase-top">
<h2>PURCHASE A LICENCE {Loading ? 'Loading...' : 'Not Loading'}</h2>
<p>
All Royalty-Free licences include global use rights,
comprehensive protection, and simple pricing with volume
discounts available.
</p>
</div>
{/* <div className="radio-box">
<div>
<input
type="radio"
id="extraSmall"
name="price"
value="extraSmall"
/>
<label htmlFor="extraSmall">
Extra small<span>₹2,000.00</span>
</label>
</div>
<div>
<input type="radio" id="small" name="price" value="small" />
<label htmlFor="small">
Small<span>₹7,000.00</span>
</label>
</div>
<div>
<input type="radio" id="medium" name="price" value="medium" />
<label htmlFor="medium">
Medium<span>₹14,000.00</span>
</label>
</div>
<div>
<input type="radio" id="large" name="price" value="large" />
<label htmlFor="large">
Large<span>₹23,000.00</span>
</label>
</div>
</div>
<div className="inr-box">₹23,000.00INR</div> */}
<div className="cart-box">
<div className="get-this">GET THIS IMAGE FOR ₹20,500</div>
{Loading == false &&<button className="add-cart-btn" onClick={() => { addToCart(provideData) }}>
{isAddToCart !==false ? isAddToCart : 'ADD TO CART'}
</button>}
<Link className="add-cart-btn" to="/cart">
View Cart ({TotalItems == '' ? 0 : TotalItems})
</Link>
</div>
</div>
</div>
</div>
</section>
<section className="viewmore-section">
<div className="container">
<h3 className="similar-images">
Similar images
</h3>
<div className="similar-container grid" id="viewbox">
<Link to={"/detail/7"} >
<div className="grid-item">
<img src={similar1} alt="similar" width={300} height={300} />
</div>
</Link>
<Link to={"/detail/106"} >
<div className="grid-item">
<img src={similar2} alt="similar" width={300} height={300} />
</div>
</Link>
<Link to={"/detail/107"} >
<div className="grid-item">
<img src={similar3} alt="similar" width={300} height={300} />
</div>
</Link>
<Link to={"/detail/108"} >
<div className="grid-item">
<img src={similar4} alt="similar" width={300} height={300} />
</div>
</Link>
</div>
<div className="img-tags">
<ul>
<li>
<Link to="/searched-result?tags=mountain">Mountain</Link>
</li>
<li>
<Link to="/searched-result?tags=mountain-pea">Mountain Pea</Link>
</li>
<li>
<Link to="/searched-result?tags=mountaineering">Mountaineering</Link>
</li>
<li>
<Link to="/searched-result?tags=on-top">On Top</Link>
</li>
<li>
<Link to="/searched-result?tags=hiking">Hiking</Link>
</li>
<li>
<Link to="/searched-result?tags=men">Men</Link>
</li>
<li>
<Link to="/searched-result?tags=freedom">Freedom</Link>
</li>
<li>
<Link to="/searched-result?tags=climbing">Climbing</Link>
</li>
<li>
<Link to="/searched-result?tags=cloud-sky">Cloud - Sky</Link>
</li>
<li>
<Link to="/searched-result?tags=people-one-person">People One Person</Link>
</li>
<li>
<Link to="/searched-result?tags=rock">Rock - Object</Link>
</li>
<li>
<Link to="/searched-result?tags=sunset">Sunset</Link>
</li>
<li>
<Link to="/searched-result?tags=nature">Nature</Link>
</li>
<li>
<Link to="/searched-result?tags=sky">Sky</Link>
</li>
<li>
<Link to="/searched-result?tags=success">Success</Link>
</li>
<li>
<Link to="/searched-result?tags=outdoors">Outdoors</Link>
</li>
<li>
<Link to="/searched-result?tags=travel">Travel</Link>
</li>
<li>
<Link to="/searched-result?tags=majestic">Majestic</Link>
</li>
<li>
<Link to="/searched-result?tags=dolomites">Dolomites</Link>
</li>
<li>
<Link to="/searched-result?tags=photography">Photography</Link>
</li>
<li>
<Link to="/searched-result?tags=sunrise-dawn">Sunrise - Dawn</Link>
</li>
</ul>
</div>
</div>
</section>
</section>
);
};
export default Detail;
The code here in my App.js renders a Navbar & a home page.
import React from "react";
import './styles/global.css';
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";
function App() {
return (
<div className="app">
<Navbar />
<Home />
</div>
)
}
export default App;
Every time I click into a section of the navbar (search, about, contact) the component renders, but my Homepage component remains displaying at the bottom of one of what should be one of the three navigation components/pages.
Here is my Navbar routing
import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import About from '../../pages/About';
import SearchPage from '../../pages/SearchPage';
import Contact from '../../pages/Contact'
import './navbar.css';
function Navbar() {
return (
<BrowserRouter>
<div className='navbar'>
<h2>Nicole's Blog.</h2>
<div className='navbar__list'>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/search">Search</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</div>
<Routes>
<Route exact path='/search' element={<SearchPage />}></Route>
<Route exact path='/about' element={<About />}></Route>
<Route exact path='/contact' element={<Contact />}></Route>
</Routes>
</BrowserRouter>
)
}
export default Navbar
The Home component is rendered in your app below your navbar component. I would suggest moving the Routes to the App component.
Your navbar component shouldn't have the routes in it:
function Navbar() {
return (
<BrowserRouter>
<div className='navbar'>
<h2> Nicole's Blog. </h2>
<div className='navbar__list'>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/search">Search</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</div>
)
}
export default Navbar
The App component should change to:
function App() {
return (
<div className="app">
<BrowserRouter>
<Navbar />
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/search" element={<SearchPage />}></Route>
<Route exact path="/about" element={<About />}></Route>
<Route exact path="/contact" element={<Contact />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
The Navbar component is rendering all the links and routes, and the App component is unconditionally rendering Home under the Navbar.
function App() {
return (
<div className="app">
<Navbar />
<Home /> // <-- always rendered
</div>
);
}
Remove Home from under Navbar and move it onto its own route.
function App() {
return (
<div className="app">
<Navbar />
</div>
);
}
...
function Navbar() {
return (
<BrowserRouter>
<div className='navbar'>
<h2> Nicole's Blog. </h2>
<div className='navbar__list'>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/search">Search</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</div>
<Routes>
<Route path='/' element={<Home />} >
<Route path='/search' element={<SearchPage />} />
<Route path='/about' element={<About />} />
<Route path='/contact' element={<Contact />} />
</Routes>
</BrowserRouter>
);
}
From an organizational standpoint it may make more sense to wrap App with the router and move the routes into App under Navbar.
Example:
function App() {
return (
<BrowserRouter>
<div className="app">
<Navbar />
<Routes>
<Route path='/' element={<Home />} >
<Route path='/search' element={<SearchPage />} />
<Route path='/about' element={<About />} />
<Route path='/contact' element={<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
...
function Navbar() {
return (
<div className='navbar'>
<h2> Nicole's Blog. </h2>
<div className='navbar__list'>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/search">Search</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</div>
);
}
I currently have my app as follows with my routes wrapped inside of BrowserRouter and I am receiving
Uncaught Error: You cannot render a <Router> inside another <Router>
Below is my codesandbox
I did a
ctl + F + Shift
and only have 1 router in my app. Does anyone see a syntax error or have a suggestion?
Codesandbox
Here is my App component:
import { BrowserRouter, Routes, Route, Router, Link } from "react-router-dom";
import Header from "./components/Header/Header";
import Features from "./components/body/Features/FeaturesGrid/FeaturesGrid";
import Artists from "./components/body/Artists/Artists";
import Fans from "./components/body/Fans/Fans";
import Groups from "./components/body/Groups/Groups";
import Footer from "./components/body/Footer/Footer";
import PPV from "./components/body/PPV/PPV";
function App() {
return (
<BrowserRouter>
<nav>
<Header />
</nav>
<Routes>
<Route path="/" element={<App />} />
<Route path="/features" element={<Features />} />
<Route path="/artists" element={<Artists />} />
<Route path="/fans" element={<Fans />} />
<Route path="/groups" element={<Groups />} />
<Route path="/ppv" element={<PPV />} />
{/* <Route path="/feed" element={<Feed />} /> */}
</Routes>
</BrowserRouter>
);
}
export default App;
Here is my Header component:
import { useState } from "react";
import HeaderCSS from "../Header/Header.module.css";
import Menu from "../../svgs/bars-solid.svg";
import Close from "../../svgs/times-solid.svg";
import Logo from "../../svgs/logotrans.svg";
import { Link } from "react-router-dom";
function Header() {
const [menu, setMenu] = useState(false);
const toggleMenu = () => {
setMenu(!menu);
};
const styleMenu = {
left: menu ? 0 : "-100%",
};
return (
<header>
<div className={HeaderCSS.menu} onClick={toggleMenu}>
<img src={Menu} alt="" width="30" />
</div>
<div className="logo">
<img src={Logo} all="" width="120" height="90" />
</div>
<div className={HeaderCSS.nav_container}>
<ul style={styleMenu}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/features">Features</Link>
</li>
<li>
<Link to="/artists">Artists</Link>
</li>
<li>
<Link to="/fans">Fans</Link>/
</li>
<li>
<Link to="/groups">Groups</Link>
</li>
<li>
<Link to="/ppv">PPV</Link>
</li>
<li>
<Link to="/feed">Feed</Link>
</li>
<li onClick={toggleMenu}>
<img src={Close} alt="" width="30" className="menu" />
</li>
</ul>
</div>
</header>
);
}
export default Header;
You are rendering App recursively
<Route path="/" element={<App />} />
You can't do that
Replace App with another component
<Route path="/" element={<div />} />
I have a navbar component within a react app but for some reason it is rendering at the bottom of the page and not at the top of the page as I would like it. I have tried putting the nav in a seperate header and position absolute top on that header but that hasn't fixed it either. Code is below.
Navbar.js
import React from 'react';
import './App.scss'
import logo from './logo.svg';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Projects from './Projects.js';
import Articles from './Articles.js';
import About from './About.js';
function Navbar() {
return (
<BrowserRouter>
<div className="App">
<Route exact path="/" component={Projects} />
<Route path="/articles" component={Articles} />
<Route path="/about" component={About} />
<div className="navigation">
<img src={logo} className="logo" alt="Logo Image" />
<div className="navigation-sub">
<Link to="/" className="item">Projects</Link>
<Link to="/articles" className="item">Articles</Link>
<Link to="/about" className="item">About</Link>
</div>
</div>
</div>
</BrowserRouter>
);
}
export default Navbar;
App.js
import React from 'react';
import Navbar from './Navbar.js'
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;
Here is an example of one of the other pages created using JSX, the navbar is at the top if I don't render another page but as soon as one of the other pages is rendered the nav is rendered at the bottom.
Projects.js
import React from "react";
import Thumbnail from './Thumbnail.js';
import './App.scss';
function Projects(props) {
return (
<div>
<h1 class='page-title'>Projects</h1>
<div className='divider'></div>
<div className="projects">
<Thumbnail link="/twitter" image="https://pbs.twimg.com/profile_banners/320887062/1552390646/600x200" title="Twitter Newsfeed" category="Mobile App" />
<Thumbnail link="/airbnb" image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg" title="Airbnb Experiences" category="Website" />
<Thumbnail link="/photoshop" image="" title="Photoshop Redesign" category="Desktop App" />
<Thumbnail link="/twitter" image="https://pbs.twimg.com/profile_banners/320887062/1552390646/600x200" title="Twitter Newsfeed" category="Mobile App" />
<Thumbnail link="/airbnb" image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg" title="Airbnb Experiences" category="Website" />
<Thumbnail link="/photoshop" image="" title="Photoshop Redesign" category="Desktop App" />
<Thumbnail link="/airbnb" image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg" title="Airbnb Experiences" category="Website" />
<Thumbnail link="/photoshop" image="" title="Photoshop Redesign" category="Desktop App" />
</div>
</div>
)
}
export default Projects;
Move your routes below the Navbar.
function Navbar() {
return (
<BrowserRouter>
<div className="App">
<div className="navigation">
<img src={logo} className="logo" alt="Logo Image" />
<div className="navigation-sub">
<Link to="/" className="item">Projects</Link>
<Link to="/articles" className="item">Articles</Link>
<Link to="/about" className="item">About</Link>
</div>
</div>
<Route exact path="/" component={Projects} />
<Route path="/articles" component={Articles} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
export default Navbar;
I have build a mobile app which shows a list of movies. Its a static for now. I want to implement a react router for routing. What i want is when user clicks on the TV Shows from the list, he/she should be directed to the detail page of that TV Show. Not on the same page(layout) where list contains. I tried to do that but when i click on the title of the TV Show i am directed nowhere. How can i do that so?The code might help for expert to know what i am wanting and where i am doing wrong.
Here is my code first
Index.js
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App} >
<Route component={DetailLayout}>
<Route name="flash" path="/flash" component={Flash} />
</Route>
</Route>
</Router>
), document.getElementById('root'));
MovieListItem.js(rendered by App.js)
const MovieListItem = ({movie}) => {
const imageUrl = movie.imageUrl;
const mainCastJoin = _.join(movie.mainCast, ', ');
return (<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl} alt={movie.title} />
</div>
<div className="media-body">
<div className="media-heading">
<Link to="flash"><h4 className="title">{movie.title}</h4></Link>
</div>
<div className="main-cast">
<ul id="cast-list">
<li className="list-item">
{mainCastJoin}...
</li>
</ul>
</div>
<div className="reviewer">
<img className="img-responsive reviewer-img" src={imdb} alt="{movie.title}" />
<div className="imdbScore">
{movie.imdb}
</div>
<img className="img-responsive reviewer-img" src={rottenTomatoes} alt="{movie.title}" />
<div style={{verticalAlign:'middle', display:'inline'}} className="rottenTomatoesScore">
{movie.rottenTomatoes}
</div>
</div>
</div>
</div>
</li>
)
};
export default MovieListItem;
Flash.js
import React, {Component} from 'react';
export default class Flash extends Component {
render() {
return (
<div>Detail page of Flash will be shown here with different Layout as in second image i have attached</div>
);
}
}
DetailLayout.js
export default class DetailLayout extends Component {
render() {
return (
<div>MyComponent</div>
);
}
}
When title of TV Show is clicked, i want to show its detail page which has completely different layout.
UPDATE
I dont know how but this works
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App} >
</Route>
<Route path="detail" component={DetailLayout}>
<Route name="flash" path="/flash" component={Flash} />
</Route>
</Router>
), document.getElementById('root'));
In MovieListItem.js if i change to it works.
You are setting your flash route as a child of DetailLayout but it renders only MyComponent and has no children. Just include {this.props.children} in DetailLayout.
Set link in your MovieItemList as <Link to="/flash>
React router searches for all the routes and then renders the route it matches,and since we have added a /flash in the route it finds flash as child of / thats the reason it works.
You can also make it work by using detail/flash by handling the route inside flash as <Route name="flash" path="/detail/flash" component={Flash} />
export default class DetailLayout extends Component {
render() {
return (
<div>
<div>MyComponent</div>
<div>{this.props.children}</div>
</div>
);
}
}
Route
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App} >
<Route name="detail" path="detail" component={DetailLayout}>
<Route name="flash" path="/flash" component={Flash} />
</Route>
</Route>
</Router>
), document.getElementById('root'));
MovieItem.js
const MovieListItem = ({movie}) => {
const imageUrl = movie.imageUrl;
const mainCastJoin = _.join(movie.mainCast, ', ');
return (<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl} alt={movie.title} />
</div>
<div className="media-body">
<div className="media-heading">
<Link to="flash"><h4 className="title">{movie.title}</h4></Link>
</div>
<div className="main-cast">
<ul id="cast-list">
<li className="list-item">
{mainCastJoin}...
</li>
</ul>
</div>
<div className="reviewer">
<img className="img-responsive reviewer-img" src={imdb} alt="{movie.title}" />
<div className="imdbScore">
{movie.imdb}
</div>
<img className="img-responsive reviewer-img" src={rottenTomatoes} alt="{movie.title}" />
<div style={{verticalAlign:'middle', display:'inline'}} className="rottenTomatoesScore">
{movie.rottenTomatoes}
</div>
</div>
</div>
</div>
</li>
)
};
export default MovieListItem;