I am using react router v4 for routing. There is a scenario that when products is clicked i want to show products just beneath banner but when add restaurant is clicked, instead of showing it in the same page beneath banner, i want to show it in different page. How can i do it on react router v4?
Here is my code (Right now when add restaurant is clicked, form box is shown on same page under banner)
const routes = [
{
pattern: '/restaurant',
component: () => <Content />
},
{ pattern: '/addrestaurant',
component: () => <AddRestaurant />
}
];
class HomeScreen extends Component {
render() {
return (
<Router>
<div>
<div className="ui grid banner">
<div className="computer tablet only row">
<div className="ui inverted fixed menu navbar page grid">
<Link to="/restaurant" className="brand item">Restaura</Link>
<Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
<Link to="/products" className="item tab">Products</Link>
</div>
</div>
</div>
<div className="ui page grid">
{routes.map((route, index) => (
<Match
key={index}
pattern={route.pattern}
component={route.component}
exactly={route.exactly}
/>
))}
</div>
</div>
</Router>
);
}
}
Declaring router
You want to break down elements into simple boxes and design the router accordingly. Basics of router is here
Depending on what you are trying to create, here’s what I would do
Option 1 (Reuse components and hide banner)
App.js
const routes = {
path: '/',
component: App,
indexRoute: { component: HomeScreen },
childRoutes: [
{ path: 'restaurant', component: Content },
{ path: 'products', component: Products },
{ path: 'addrestaurant', component: AddRestaurant}
]
}
render(<Router history={history} routes={routes} />, document.body)
HomeScreen.js
class HomeScreen extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
{
this.props.location.pathname.indexOf('addrestaurant') < 0
? <div className="ui grid banner">
<div className="computer tablet only row">
<div className="ui inverted fixed menu navbar page grid">
<Link to="/restaurant" className="brand item">Restaura</Link>
<Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
<Link to="/products" className="item tab">Products</Link>
</div>
</div>
: null}
</div>
{this.props.children}
</div>
);
}
}
Note: this.props.children is where the child components are rendered.
Option 2 (Use addrestaurant as sibling state)
App.js
const routes = {
path: '/',
component: App,
indexRoute: { component: HomeScreen },
childRoutes: [
{ path: 'restaurant',
component: Content,
childRoutes: [
{ path: 'about', component: About },
{ path: 'products', component: Products }
]
},
{ path: 'addrestaurant',
component: Restaurant,
childRoutes: [,
{ path: 'add', component: AddRestaurant },
{ path: 'edit', component: EditRestaurant }
]
}
]
}
render(<Router history={history} routes={routes} />, document.body)
Content.js
class HomeScreen extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<Banner />
{this.props.children}
</div>
);
}
}
Restaurant.js
class Restaurant extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
It really depends on what you are trying to do. Hope this helps.
The answer by user-013948 is the right approach, just the wrong react router version.
Essentially what you want to do is move any code that should only be rendered for certain matches into the component rendered by those matches.
Since the banner should only be rendered by some components, you should create a component just for it:
const Banner = () => (
<div className="ui grid banner">
<div className="computer tablet only row">
<div className="ui inverted fixed menu navbar page grid">
<Link to="/restaurant" className="brand item">Restaurant</Link>
<Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
<Link to="/products" className="item tab">Products</Link>
</div>
</div>
</div>
)
And then, any components that should display the banner should include it:
const Content = () => (
<div>
<Banner />
{/* other content */}
</div>
)
Then, when you render your project, the banner will only be rendered if it is part of a <Match>‘s component.
const App = () => (
<Router>
<div>
<Match pattern='/restaurant' component={Content} />
<Match pattern='/addrestaurant' component={AddRestaurant} />
</div>
</Router>
)