<Route path='/dashboard' element={<Navbar />}>
<Route index element={<Home />} />
<Route path='profile' element={<Profile />} />
<Route path='wallets' element={<Wallet />} />
<Route path='users' element={<Users />} />
</Route>
Here's my code and what basically happens is in my Navbar I got the active page link marked blue
So when I'm on /dashboard it shows Home in blue
But when I'm on /dashboard/profile it shows both home and profile in blue
<li>
<NavLink to=''>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Home</text>
) : (
<text>Home</text>
)
}
</NavLink>
</li>
<li>
<NavLink to='profile'>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Profile</text>
) : (
<text>Profile</text>
)
}
</NavLink>
</li>
You can specify the end prop on the "root"-level link to the "/dashboard" path.
NavLink
If the end prop is used, it will ensure this component isn't matched
as "active" when its descendant paths are matched.
<NavLink to='' end>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Home</text>
) : (
<text>Home</text>
)
}
</NavLink>
<NavLink to="/">Home</NavLink>
<NavLink to="/profile">Profile</NavLink>
<NavLink to="/wallets">Wallet</NavLink>
Here React Router considers the /path the same as the /about. By including the end prop, the active class will be applied only when the URL matches its attributes.
NavLink to="/profile" style={({isActive}) => isActive ? {background: "hotpink"} : undefined} >Profile</NavLink>
Related
I want to not need to import a child component.
and Manipulation within the parent
On ReactJS is like that
`export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route
{...rest}
component={props =>
isAuthenticated ? (
<div>
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
}
/>
);`
On vue i want do something like that
The child :
<template>
title
<test>//parent
<div>Content</div>//child
</test>
</template>
on Parent Test like that
<template lang="">
<div>
Hello
<component></component> //Content Child
</div>
</template>
how do i do, can someone help me?
I have Drawer class component and I want to make marginTop for that Drawer, but I can't this is my code
const theme = createMuiTheme({
root: {
marginTop: '40px'
},
})
class PageMenu extends React.Component {
render () {
return (
<div>
<Drawer
classes={{paper: classes.drawerPaper }}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</Drawer>
</div>
)}
i want to make it working in class component
You can just add another class name to it and then style it in your CSS file by the following lines of code:
.classname{
margin-top:yourNumber;
}
Hello so far I have this:
app js:
const App = () => {
return (
<BrowserRouter>
<PublicRoute restricted={false} component={Header} path={['/']} exact />
<Switch>
<PublicRoute restricted={false} component={Content} path="/" exact />
<PublicRoute restricted={false} component={Content2} path="/" exact />
</Switch>
<PublicRoute restricted={false} component={Footer} path={['/']} exact />
</BrowserRouter>
)
}
header.js
const Header = () => {
return(
<div style={{backgroundColor:'#000'}}>
Header
</div>
)
}
footer.js
import React from 'react';
const Footer = () => {
return(
<div style={{backgroundColor:'#eee'}}>
Footer
</div>
)
}
I don't know if I'm on the right track about a single page but I'm having a hard time finding the best solution for placing my footer sickey at bottom 0
You have 2 ways to create such a site
1)that you use:
const App = () => {
return (
<>
<BrowserRouter>
<YourHeaderComponent/>
<Switch>
{yourRoutesArray.map (route => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
<Route component={Your404Component} />
</Switch>
</BrowserRouter>
<YourFooterComponent/>
</>
)}
2)that you use with layout:
export const withLayout = (Page: any) => {
return (
<>
<Header />
<Page {...props} />
<Footer />
</>
);
}
and in all of your roots export it like this
const YourComponent =()=>{
return(
<div>hello</div>
)
}
export default withLayout(YourComponent);
Try something like this.
const App = () => {
return (
<BrowserRouter>
<Header />
<Switch>
<Route restricted={false} path="/" exact><Content /></Route>
<Route restricted={false} path="/contenttwo" exact /><ContentTwo /></Route>
</Switch>
<Footer />
</BrowserRouter>
)
}
This will always render your header and footer component and only change the content based on routes.
I have a parent component from which I would like to send function to my child component.
ParentComponent.js
export default class LandingPage extends React.Component {
onSearchSubmit(term) {
console.log(term);
}
render() {
return (
<div>
<div className = "admin" >
<SearchBar onSubmit = {this.onSearchSubmit}
/>
</div>
....
ChildComponent.js
export default class SearchBar extends React.Component{
state = {term: ''};
onFormSubmit = event => {
event.preventDefault();
this.props.onSubmit(this.state.term);
};
render(){
return(
<div>
<div className="container">
<div className="searchBar mt-5">
<form onSubmit={this.onFormSubmit}>
<div className="form-group">
<label for="search">Image search</label>
<input
type="text"
className="form-control"
placeholder="Search..."
value = {this.state.term}
onChange={e => this.setState({term: e.target.value})}
/>
</div>
</form>
</div>
</div>
</div>
)
}
}
I'm sending function to my child component so I could get input from user using search bar back to parent component. It works fine if child component is displayed and used on parent component.
But if I would like to approach my child component in a way that I hide it from parent component with CSS:
.admin{
display: none;
}
and access it like http://localhost:3000/bar and type text in my search bar there I am getting following error:
Uncaught TypeError: _this.props.onSubmit is not a function
Is it possible to send data this way using ReactJs or is there any other way to send data to child component without displaying child component in parent?
UPDATE - WORKING SOLUTION
I added parent component for both of my pages.
I have changed structure of my app in that way.
Before my app was structured in way that my LandingPage.js was a parent to SearchBar.js.
That's why I couldn't make communication between them work in way I wanted. I was trying to hack it by hiding search bar from my landing page and trying to send data from http://localhost:3000/searchbar to http://localhost:3000/ without any luck and getting errors.
After I structured my app tp look like this:
I was able to send data between LandinPage.js and SearchBar.js.
App.js looked like this:
export default class App extends React.Component{
render(){
return(
<div>
<Route path="/" exact component={LandingPage} />
<Route path="/admin" component={Admin}/>
<Route path="/posts" component={Post} />
<Route path="/categories" component={Categories} />
<Route path="/users" component={Users} />
<Route path="/details" component={Details} />
<Route path="/profile" component={Profile} />
<Route path="/weatherapp" component={weatherApp} />
<Route path="/bar" component={SearchBar}/>
</div>
)
}
}
To make App.js as parent have changed it to look like this:
App.js
export default class App extends React.Component{
constructor(props){
super(props)
this.state = {
articalName: "Landing page"
};
}
onSearchSubmit = term => {
console.log(term);
}
render(){
return(
<div>
<Route path="/" exact component={LandingPage} />
<Route path="/admin" component={ () =>
<Admin
title={this.state.articalName}
/>}
/>
<Route path="/posts" component={Post} />
<Route path="/categories" component={Categories} />
<Route path="/users" component={Users} />
<Route path="/details" component={Details} />
<Route path="/profile" component={Profile} />
<Route path="/weatherapp" component={weatherApp} />
<Route path="/bar" component={ () =>
<SearchBar
onSubmit={this.onSearchSubmit}
/>}
/>
</div>
)
}
}
I used routes to send my data from parent to child. This example uses React Router 4. I wanted to use only ReactJs but I guess good solution would be also using Redux.
Since you do not want a parent-child relationship between both the components, how about making them as siblings and add a parent component for both of them!
With that any search made in the SearchBar component you can pass it to the new parent and from that to the earlier considered parent.
I am having an issue with active link.
I need to create few sub Routes and keep active styling on "parent" Route. How can I achieve that?
I am using withRouter for Routing purposes.
Let say I have main Navigation with 3 "parent" Routes - /login | /register /profile.
render () {
return (
<div className='grid'>
<Route exact path='/' component={HomePage} />
<Route path='/login' component={LoginForm} />
<Route path='/register' component={RegisterForm} />
<PrivateRoute path='/profile' component={PersonalDetails} />
<PrivateRoute path='/profile/delete-account' component={DeleteAccount} />
<PrivateRoute path='/profile/payments' component={Payments} />
<PrivateRoute path='/profile/food-preferences' component={FoodPreferences} />
</div>
);
}
Inside Component which is rendering on '/profile' route there is additional navigation with links to '/profile/delete-account/', '/profile/payments', 'profile/food-preferences'.
static getProfileRoutes () {
return profileRoutes.map(route => (
<NavLink to={route.path} activeClassName='active-profile' className='profile-navigation-button' key={route.path}>
<li className='profile-navigation-label'>{route.name}</li>
</NavLink>
));
}
Unfortunately when I navigate to one of "child" routes, active styling from button in SideBar which navigates to '/profile' is lost. How can I prevent it? Fix it?
static getSideBarRoutes () {
return sideBarRoutes.map(route => (
<NavLink className='navigation-button' key={route.path} to={route.path}>
<li className='navigation-item'>
<div className={route.icon} />
{route.name}
</li>
</NavLink>)
);
}
Routing is working perfectly fine - its just problem with active class lost on Sidebar
Many thanks for your help.
For example
const navigation = (props) => {
let styleClass= "not-active-class";
if (props.location.pathname.indexOf(props.route) !== -1) {
// checking if parent route is contained in route and setting active class
styleClass= "active-class";
}
return (
<NavLink
to={props.route}
activeClassName={styleClass} >
<p>{props.route}</p>
</NavLink>
);
}