I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router
If I use this...
<Menu.Item name='profile'>
<Icon name='user' />
My profile
</Menu.Item>
...it gives me the result:
<a class="item">
<i aria-hidden="true" class="user icon"></i>
My profile
</a>
But I would like to get something like
<Link to='profile'>
<i aria-hidden="true" class="user icon"></i>
My profile
</Link>
This one doesn't work, as the syntax is wrong:
<Menu.Item name='profile' as={ <Link to='profile' /> }>
<Icon name='user' />
My profile
</Menu.Item>
You need use the SUIR's augmentation:
<Menu.Item as={ Link } name='profile' to='profile'>
<Icon name='user' />
My profile
</Menu.Item>
Use browserHistory.push instead ; It was provided also by react-router as an alternative of Link but non-markup :
import {browserHistory} from 'react-router';
redirect(to) {
browserHistory.push({
pathname: to
});
}
//......
<Menu.Item name="profile" onClick={this.redirect('/profile')}
<Icon name='user' />
My profile
</Menu.Item>
If you want to get /profile from name props , change the line by :
<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}
And if so , <Menu onItemClick={...} > is better than <Menu.item onClick={...} >
Related
I have six components which I want to redirect to six different links
import Post from "../post/Post";
import ".//posts.css";
export default function Posts() {
return (
<div className="flex-container">
<Post title="2BHK 2Bath" rent="20000" redirect="1" />
<Post title="3BHK 2Bath" rent="25000" redirect="2" />
<Post title="1BHK 1Bath" rent="14000" redirect="3" />
<Post title="3BHK 3Bath" rent="30000" redirect="4" />
<Post title="2BHK 2Bath" rent="18000" redirect="5" />
<Post title="1BHK 1Bath" rent="10000" redirect="6" />
</div>
);
}
Post.jsx
export default function Post({ title, rent, redirect }) {
return (
<div className="post">
<img
className="postImg"
src="https://www.thespruce.com/thmb/aGEhef5NbpY6R_Fahn5fIW8SAHk=/941x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/put-together-a-perfect-guest-room-1976987-hero-223e3e8f697e4b13b62ad4fe898d492d.jpg"
alt=""
/>
<div className="postInfo">
<div className="postCats"></div>
<span className="postTitle">
<Link
to={{ pathname: "/post/{redirect}" }}
className="link"
>
{title}
</Link>
</span>
<hr />
<span className="postDate">Rent: {rent}/-</span>
</div>
</div>
);
}
This does not work, clicking on the first post with redirect: 1 redirects me to this URL http://localhost:3000/post/%7Bredirect%7D
I also tried making it like this from a stackoverflow answer
<Link
to={{ pathname: "/post", state: { redirect } }}
className="link"
>
{title}
</Link>
But this also did not work.
How I can make so that, I can pass the redirect_id through the props of the components.
Example:
When I click on component of <Post title="2BHK 2Bath" rent="20000" redirect="1" /> it should redirect me to http://localhost:3000/post/1
How can I do this?
you can try using template string
<Link to={{ pathname: `/post/${redirect || 0}` }} className="link">
{title}
</Link>
I have little problems with my ReactJs app, I'm receiving message like:
./src/components/Navbar/index.js
Line 13:3: 'state' is not defined no-undef
Line 17:3: 'handleClick' is not defined no-undef
I'm beginner with JavaScript and it's seams it's easy fix, I just copied that code from another app where it works.
This is my code:
import React, { useState } from 'react';
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';
const { Header } = Layout;
const { SubMenu } = Menu;
const Navbar = props => {
state = {
current: 'home',
};
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};
const [visible, setVisible] = useState(false);
const menu = (
<Menu
theme="lite"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
return (
<Header className="app-header">
<Default>{menu}</Default>
<Mobile>
<Icon type="bars" size="large" className="nav-icon" onClick={() => setVisible(true)} />
<Drawer
title=""
placement="left"
closable
onClose={() => setVisible(false)}
visible={visible}
className="nav-drawer"
>
{menu}
</Drawer>
</Mobile>
</Header>
);
};
export default Navbar;
I copied this state and handleClick from another app but it was class, I tried to change const Navbar with class NavBar extends Component but no success.
You are mixing react components and react hooks. You should either use hook (useState), or components (this).
Here is your code with hooks
import React, { useState } from 'react';
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';
const { Header } = Layout;
const { SubMenu } = Menu;
function Navbar(props) {
const [current, setCurrent] = useState('home');
const [visible, setVisible] = useState(false);
function handleClick(e) {
console.log('click ', e);
setCurrent(e.key)
};
const menu = (
<Menu
theme="lite"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
return (
<Header className="app-header">
<Default>{menu}</Default>
<Mobile>
<Icon type="bars" size="large" className="nav-icon" onClick={() => setVisible(true)} />
<Drawer
title=""
placement="left"
closable
onClose={() => setVisible(false)}
visible={visible}
className="nav-drawer"
>
{menu}
</Drawer>
</Mobile>
</Header>
);
};
export default Navbar;
Everything else looks fine except:
const [current, setCurrent] = useState('home') ;
const handleClick = e => {
console.log('click ', e);
setCurrent(e.key);
};
Actually you have to convert the this.state to hook as well.
I have created a react 16.8 application and am using react-router-dom. I built the Navigation Bar with React Semantic UI library. My Problem is that when I click the Menu Item Navlink the App changes the url however, it does not rerender the app with the new component that matches the path. I have tried various fixes to no avail. I have used Switch I have used Navlink, I have used withRouter. I tried to do a componentDidUnmount. When I refresh the app the component I am looking for does work. It just doesnt change when I click the navigation link. Here is my code. I am only asking because I have no other option and all the other answers are so outdated.
The App.js
import React from 'react';
import {BrowserRouter, Route, withRouter, Switch} from 'react-router-dom'
import Landing from './components/Landing/Landing'
import Sales from './components/Dashboard/Sales/Sales'
import Orders from './components/Dashboard/Orders/Orders'
import Returns from './components/Dashboard/Returns/Returns'
import DailySales from './components/Reports/Sales/DailySales/DailySales';
function App() {
return (
<BrowserRouter>
<div className='App'>
<Switch>
<Route path="/" exact component={withRouter(Landing)} />
<Route path="/dashboards/sales" exact component={withRouter(Sales)} />
<Route path="/dashboards/orders" exact component={withRouter(Orders)} />
<Route path="/dashboards/returns" component={withRouter(Returns)} />
<Route path="/reports/dailysales/" component={withRouter(DailySales)} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
And the Navigation component
import React from 'react'
import logo_icon from '../../../../assets/images/logo_icon.png'
import { Dropdown , Menu, Image } from 'semantic-ui-react'
import { BrowserRouter, Route ,Link, NavLink , withRouter ,Switch} from 'react-router-dom'
import Landing from '../../../Landing/Landing'
import Sales from '../../../Dashboard/Sales/Sales'
const Navigation = () => (
<BrowserRouter>
<Menu className="ui secondary">
{/* Menu Icon */}
<Link to="/dashboards/sales">
<Dropdown.Item>
<Image className="item headLogo" src={logo_icon} />
</Dropdown.Item>
</Link>
{/* End of Menu Icon */}
{/* Here is Sales Dropdown */}
<Dropdown className="ui dropdown item" text="Sales" icon="dropdown">
<Dropdown.Menu>
<Menu.Item className="item" as={ NavLink } exact to="/dashboards/sales" name="Dashboard" />
<Dropdown className="ui dropdown link item" text="Reports">
<Dropdown.Menu>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Daily Sales"/>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Sales Summary"/>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Profit Margin"/>
</Dropdown.Menu>
</Dropdown>
</Dropdown.Menu>
</Dropdown>
{/* End of Sales Dropdown */}
{/* Here is Customer Service Dropdown */}
<Dropdown className="ui dropdown item" text="Customer Service">
<Dropdown.Menu>
<Dropdown className="ui dropdown link item" text="Reports">
<Dropdown.Menu>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Service Level(Voice)"/>
</Dropdown.Menu>
</Dropdown>
</Dropdown.Menu>
</Dropdown>
{/* End of Customer Service Dropdown */}
{/* Here is Order Management Dropdown */}
<Dropdown className="ui dropdown item" text="Order Management">
<Dropdown.Menu>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Dashboard"/>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Fishbowl Anywhere"/>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Search Orders"/>
</Dropdown.Menu>
</Dropdown>
{/*End of Order Management Dropdown */}
{/*Here is Inventory Management Dropdown */}
<Dropdown className="ui dropdown item" text="Inventory Management">
<Dropdown.Menu>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="View Inventory"/>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Monitor Inventory"/>
</Dropdown.Menu>
</Dropdown>
{/*End of Inventory Management Dropdown */}
{/*Here is Returns Dropdown */}
<Dropdown className="ui dropdown item" text="Returns" icon="dropdown">
<Dropdown.Menu>
<Menu.Item className="item" as={ Link } to="/dashboards/orders" name="Dashboard" />
<Menu.Item className="item" as={ Link } to="/dashboards/orders" name="Search Returns" />
<Dropdown className="ui dropdown link item" text="Reports">
<Dropdown.Menu>
<Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Weekly Returns"/>
</Dropdown.Menu>
</Dropdown>
</Dropdown.Menu>
</Dropdown>
{/*End of returns Dropdown */}
</Menu>
</BrowserRouter>
)
export default withRouter(Navigation);
Try taking BrowserRouter off of your Navigation component
I'm currently using reactJs along with ant design to help me build a website. However, I've stumbled upon a problem. I can change the actual color of a menu, but I can't change the color of the menu item when it's been selected, or when the mouse is hovering over it. Here's the menu, Menu Image I want to change that white to a light green, but I haven't found any way to directly access it and change it. Also, I don't want to use LESS to do it.
Does anyone know how to fix this? Here's my code for the layout.
import { Layout, Menu, Icon, Row, Button, Col } from 'antd';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
class BasicLayout extends React.Component {
state = {
collapsed: false,
path: this.path
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider className='ant-menu' trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu className='ant-menu' mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" >
<Link to='/'>
<Icon type="home" />
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to='/about'>
<Icon type="plus" />
<span>About</span>
</Link>
</Menu.Item>
<SubMenu key="3" title={<span><Icon type="database" /><span>Directory</span></span>}>
<Menu.Item>
<Link to='/resources/living'>
<span>Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/water2'>
<span>Non-Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/recycle'>
<span>Recycling Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/reducing'>
<span>Reducing Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources'>
<span>General</span>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 280,
}}
>
{this.props.children}
</Content>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
You need to change Link to NavLink and add attribute activeClassName
<NavLink to="/portoflio" activeClassName="your-active-class" className="link">Portoflio</NavLink>
For the hover options you can achieve it only with css
a.link:hover {
/*Any style you want to have link on mouse over*/
background-color: yellow;
}
.your-active-class{
/*Any style you want to have link that is active*/
background-color: yellow;
}
https://www.w3schools.com/cssref/sel_hover.asp
I have a very simple antd menu which I used following their docs. However, when the submenu opens it is floating (not attached to the main menu) and it really doesn't look good.
How do I fix this?
This is what my code currently looks like:
export function MainMenu () {
return (
<AntdLayout>
<Menu mode='horizontal' theme='dark' style={{ position: 'fixed', zIndex: 1, width: '100%', marginBottom: 100 }}>
<Menu.Item key='home'>
Home
</Menu.Item>
<SubMenu key='submenu' title='SubMenu'>
<Menu.Item key='1'>
Option 1
</Menu.Item>
<Menu.Item key='2'>
Option 2
</Menu.Item>
</SubMenu>
<Menu.Item key='contact'>
Contact
</Menu.Item>
</Menu>
</AntdLayout>
)
}
Here is a screenshot of what it looks like:
As its not adviced because Ant is a design system, you can achieve it by targeting the .ant-menu-submenu > .ant-menu selectors:
/* ./App.css */
.ant-menu-submenu > .ant-menu {
margin-top: -5px;
}
// index.js
import { Layout, Menu } from 'antd';
import 'antd/dist/antd.css';
import './App.css';
function MainMenu() {
return (
<Layout>
<Menu mode="horizontal" openKeys={['submenu']}>
<Menu.Item key="home">Home</Menu.Item>
<Menu.SubMenu
key="submenu"
title="SubMenu"
>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.SubMenu>
<Menu.Item key="contact">Contact</Menu.Item>
</Menu>
</Layout>
);
}