score:8
You can maybe do a conditional rendering by checking the current path.
If the <anything>
part (I assume it is a parameter) after the /chatroom/
is not important, and if you do not have any other routing that starts with chatroom, you can try this one:
const currentPath = window.location.pathname
{!currentPath.includes('chatroom') ? <Footer /> : null }
So your code would look like this:
class AppContainer extends Component {
render() {
currentPath = window.location.pathname
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
{!currentPath.includes('chatroom')
? <Footer />
: null }
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}
If <anything>
part is important and/or you have other routes that starts with chatroom, you can first get the parameter of the route with
const param = FlowRouter.getParam('someParam');
and then do the conditional rendering by checking if the current path contains the chatroom/:param like this:
const currentPath = window.location.pathname
{!currentPath.includes(`chatroom/${param}`) ? <Footer /> : null }
So your code would look like this
class AppContainer extends Component {
render() {
const currentPath = window.location.pathname
const param = FlowRouter.getParam('someParam');
return(
<div className="hold-transition skin-green sidebar-mini">
<div className="wrapper">
<Header user={this.props.user} />
<MainSideBar />
{this.props.content}
{!currenPath.includes(`chatroom/${param}`)
? <Footer />
: null }
<ControlSideBar />
<div className="control-sidebar-bg"></div>
</div>
</div>
)
}
}
score:0
You can also use the following syntax below. It accomplishes the same thing as the first example provided by Cagri Yardimci.
{ !currentPath.includes('chatroom') && <Footer /> }
Source: stackoverflow.com
Related Query
- React with FlowRouter: How to show/hide component based on route
- React - how to use hooks to hide or show a component based on an onChange event
- React JS - How can I show / hide some parts of component based on URL path?
- How do I only show a react component based on route change?
- React Building a CMS with dashboard how to show hide Dashboard component
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- With the React Rating Component, how to show a custom message based on the rating?
- How to link to Routes inside the component rendered by another Route with React Router
- How to Hide and show HTML based on a cookie existing or not in a React App
- Custom reusable react component to show or Hide child elements based on flag
- How to Correctly Show a Component Based on State in React
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- How to show / hide component with onClick set on element from other component
- How to hide a child component when changing React route
- How can I detect if a React component is completely loaded to show ot to hide a section?
- How to hide some component based on some flag in react js
- REACT JS How to show one component and hide the others on click
- How to conditionally route to a component in react based on a variable in the route?
- React JS JSX Show or Hide Based on Another Toggle Component
- How to render components dynamically based on route name with React router
- Hide Show component and highlight link with react scroll
- react router v4 about how to match two url with one route and one component
- How do I pass Redux props to a separate component in a different Route with React Router v4?
- Hide or show element of a component based on role permission in react
- How to hide react component on route changes?
- How can I hide / show default placeholder with AntDesign React
- React js PrivateRoute show hide a dashboard Component based on JSON web token and fetch call
- How to use children with React Stateless Functional Component in TypeScript?
- How to mock React component methods with jest and enzyme
- How to test style for a React component attribute with Enzyme
More Query from same tag
- Components duplicate, triples, quadruple onClick React
- Is it possible to load a module dynamically from a string
- Constructing nested array based on database data
- State not updating until external event
- Navigating inside a function in react
- React MUI: How to create a flex-box like grid using the Grid component
- is there an easier algorithm to solve this form problem?
- .map is not a function when fetching data from API reactjs
- Validate input in Nodejs/Express back-end and send result to React front-end
- NextJS - Load external script on page component load
- Split one react component into two
- Moment auto set locale after importing the data
- Getting `tar: Error opening archive: Unrecognized archive format` while downloading a file from server
- React : date[("get" + method)] is not a function
- typescript how to omit enum values
- react compile error, Module not found
- Change value on dynamic input fields in reactjs
- overwrite the font size of this class .MuiTypography-body1
- Checkbox and label in same line
- How can I customize the padding in a Material-UI autocomplete control?
- How to insert data in child table from react to django rest framework models
- State on a child element in react.js
- How can I create nested option groups in React Select (V2)?
- React clone component (stateless or stateful) to pass additional props
- React stopPropagation onClick for disabled button with nested elements
- Please help to solve the problem Reactjs map items
- How to use DOMRect with useEffect in React?
- How to change CSS attributes in React?
- Api marvel response don't show react
- How to dynamically add the valueOptions of a singleSelect column in Material-UI's DataGrid?