I have try to use NavLink in react-router-dom but something not working. Thanks for any help.
I'm in Profile page, i click <NavLink to="/adminboard/settings">and it change the path to '/adminboard/settings' and activeClassName in Settings but i'm still in Profile page. Then i refresh page, it's going to the Settings page.
my code :
<AdminNav style={{ margin: '0px', padding: '0px', marginTop: '160px' }}>
<Router style={{ margin: '0px', padding: '0px' }}>
<Switch style={{ margin: '0px', padding: '0px' }}>
<Route exact path="/adminboard/profile" component={AdminboardProfile} />
<Route exact path="/adminboard/postsanpham" component={AdminPostSanPham} />
<Route exact path="/adminboard/settings" component={AdminSetting} />
<Route exact path="/adminboard/store" component={AdminStore} />
</Switch>
</Router>
</AdminNav>
my Nav code:
<NavLink to="/adminboard/profile" activeClassName="active">
<span>{faUserIcon}</span>
<span>Profile</span>
</NavLink>
<NavLink to="/adminboard/postsanpham" activeClassName="active">
<span>{postsanpham}</span>
<span>Store</span>
</NavLink>
<NavLink to="/adminboard/store" activeClassName="active">
<span>{faClipboardListIcon}</span>
<span>Store</span>
</NavLink>
<NavLink to="/adminboard/settings" activeClassName="active">
<span>{faToolboxIcon}</span>
<span>Settings</span>
</NavLink>
I guess the problem is because you did not use the exact attribute as in
<Route exact path='/category' component={Category}></Route>
exact will look for complete route ie '/adminboard/settings' if exact is not used it will stop looking further if a match is first found (it matches with 'adminboard' and will not look further)
Related
Hi I deployed a new react app to ghpages. One of the pages has a Tab Container with 3 Nav Items that serve as a link. The first tab which auto loads with the page shows all the images correctly. The second and third tab do not show the pages. These images are rendered properly when I run it locally. They are all coded the same way. Anyone know how to solve this?
Link to ghpages https://johntrieseverything.github.io/starcraft2-unit-counter/
The error occurs under the "Units List" section when selecting the second or third tab.
Here is what my code looks like:
<Tab.Container defaultActiveKey="Protoss" >
<Container fluid className='unitListDisplayBackground'>\
<Row style={{ height: '10vh' }}></Row>
<Row className='mt-5'>
<h1>Units List</h1>
<p>This is a page where you can view all playable units and see their stats</p>
</Row>
<Row>
<Nav fill variant='tabs' defaultActiveKey="/home">
<Nav.Item >
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Protoss">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Protoss Icon.png"}
alt='Protoss Icon'
style={{ width: '50px', height: '50px' }}
/></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Zerg">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Zerg Icon.png"}
alt='Zerg Icon'
style={{ width: '65px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Terran">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Terran Icon.png"}
alt='Terran Icon'
style={{ width: '50px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="Protoss" style={{ textAlign: 'center' }}>
{/* Display the Protoss Units */}
<ProtossUnits />
</Tab.Pane>
<Tab.Pane eventKey="Zerg" style={{ textAlign: 'center' }}>
{/* Display the Zerg Units */}
<ZergUnits />
</Tab.Pane>
<Tab.Pane eventKey="Terran" style={{ textAlign: 'center' }}>
{/* First 3 Terran units */}
<TerranUnits />
</Tab.Pane>
</Tab.Content>
</Row>
</Container>
</Tab.Container>
Another issue I'm having is the 404 error on page refresh. I read that the Hashbrowser is a quick work around but the react router doc says its not recommended. What are some other potential solutions?
Code for routing:
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="starcraft2-unit-counter">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/UnitsList" element={<UnitsList />} />
<Route path="/UnitCountersPage" element={<UnitCountersPage />} />
<Route path="/ArmyCounterPage" element={<ArmyCounterPage />} />
</Routes>
</BrowserRouter>
</div>
)
}
}
Thank you!
Tried looking online for similar problems but couldn't find one..
how do I style the background of <li> elements inside of the <NavLink>
<ul>
<NavLink activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="">
<li>Home</li>
</NavLink>
<NavLink activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="/about">
<li>About</li>
</NavLink>
<NavLink activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="/contact">
<li>Contact</li>
</NavLink>
</ul>
right now I've been trying to use the activeStyle but isn't going well for me cause maybe it styled the <a> tag. Can you style the background of <li> tag with <NavLink> active style or maybe there is a workaround to this?
Thank you in advance
you can use activeClassName property:
<NavLink to="/faq" activeClassName="selected">
...
</NavLink>
Below is the code:
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, ProfileFilled, CreditCardFilled, SearchOutlined, BankOutlined} from '#ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Sider, Footer } = Layout;
function Admin(){
function handleClick(){
console.log("Search")
}
return(
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} icon={<UserOutlined />}>
<Menu.Item key="1">Creame Cookies</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
theme="dark"
mode="inline"
defaultOpenKeys={['Dashboard']}
defaultSelectedKeys={['Dashboard']}
style={{ height: '250%', borderRight: 0, width: 250 }}
>
<Menu.Item key="Dashboard" icon={<UserOutlined />}>
Dashboard
</Menu.Item>
<Menu.Item onClick={handleClick} key="Search" icon={<SearchOutlined />}>
Search
</Menu.Item>
<SubMenu key="Profiles" icon={<ProfileFilled />} title="Profiles">
<Menu.Item key="1">Free Profiles</Menu.Item>
<Menu.Item key="2">Premium Profiles</Menu.Item>
</SubMenu>
<Menu.Item key="Payments" icon={<CreditCardFilled />}>
Payments
</Menu.Item>
</Menu>
</Sider>
<Layout style={{ padding: '0 72px 72px' }}>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 500,
}}
>
<h1>Default</h1>
</Content>
</Layout>
</Layout>
{/*<Footer style={{ textAlign: 'center' }}>Creame Cookies Ltd</Footer> */}
</Layout>
)
}
export default Admin
Now, I need to render components at the location of the h1 tag with text as Default, based on the menuitem clicked. I am unsure of how to do this in react since I am new to it and feeling it difficult as compared to vannila javascript and jQuery in which I have already worked.
<h1>{someCondition ? 'Text A': 'Text B'}</h1> is generally how you handle this. You can always do the condition at the top of the component before your return statement if you prefer.
{ } is syntax to wrap an expression in React. You could put a ternary or just a variable in there to render.
Could also do <h1>{someCondtion ? <ComponentA /> : <ComponentB />}</h1>.
I am quite new to ReactJS and I am really stuck in the process of routing. There are n numbers of methods on routing and i am really confused where should i place the links and the routes and is there any need of mounting a component in this or not and if once i am able to get the data so is routing the efficient way to do it in a dynamic environment?
i have an existing templates of ant design!
Index.js
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Router, Route, Link } from "react-router";
import { Layout, Menu, Breadcrumb, Icon } from "antd";
import Example from "./Components/allSubCount";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
ReactDOM.render(
<Layout>
<Header className="header">
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={["2"]}
style={{ lineHeight: "64px" }}
/>
</Header>
<Layout>
<Sider width={200} style={{ background: "#fff" }}>
<Menu
mode="inline"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
style={{ height: "100%", borderRight: 0 }}
>
<SubMenu
key="sub1"
title={
<span>
<Icon type="user" />
Dashboard
</span>
}
>
<Menu.Item key="1">Sub Graph</Menu.Item>
<Menu.Item key="2">Int Graph</Menu.Item>
<Menu.Item key="3">PO Graph</Menu.Item>
</SubMenu>
<Menu.Item key="4">
<span>
<Icon type="user" />
Marketers
</span>
</Menu.Item>
<Menu.Item key="5">
<span>
<Icon type="user" />
Consultants
</span>
</Menu.Item>
</Menu>
</Sider>
<Layout style={{ padding: "0 24px 24px" }}>
<Content
style={{
background: "#fff",
padding: 24,
margin: 24,
minHeight: 280
}}
>
<Example />
</Content>
</Layout>
</Layout>
</Layout>,
document.getElementById("container")
);
Refer dis answer
https://stackoverflow.com/a/56053141/6150566
I have included sample code in the link that was provided in the above answer. However, you don't have to use protected routes if you don't prefer to. But it is better to isolate route and app layout logic.
I have create a route for a page.In side that page I have use 4 component.I have give path to these to these component.In header dropdown I have given links to these components, On first click the path is change.
but in second click the url is change but not redirecting.
const menu = (
<Dropmenu>
<Menu
key="menu"
style={{ backgroundColor: '#0f2037', borderRadius: '0' }}
>
<Menu.Item key="golive">
<Link to={'/s/live'} style={{ color: '#fff' }}>
<Icon type="video-camera" />
Start Live Broadcast
</Link>
</Menu.Item>
<Menu.Item key="mychannel" style={{ color: '#fff' }}>
<Link to={'/s/profile'} style={{ color: '#fff' }}>
<Icon type="user" />
Manage Profile
</Link>
</Menu.Item>
<Menu.Item key="settings">
<Link to={'/s/account'} style={{ color: '#fff' }}>
<Icon type="setting" />
Account
</Link>
</Menu.Item>
<Menu.Item
key="logout"
onClick={this.logoutCall}
style={{ color: '#fff' }}
>
<Icon type="logout" />
Logout
</Menu.Item>
</Menu>
</Dropmenu>
);
<BrowserRouter>
<Switch>
<Route path="/s" component={GoLive} />
<Route
path="/s/profile"
render={() => (
<div>
<ManageProfile descri={teprop} />
</div>
)}
/>
</Switch>
</BrowserRouter>
Adding exact to Routes will solve the problem:
<Route path="/s" exact={true} component={GoLive} />
<Route
exact={true}
path="/s/profile"
render={() => (
<div>
<ManageProfile descri={teprop} />
</div>
)}
/>
The Switch component renders the first matching route and /s is matched in /s/profile/ .
You can use exact in Route:
<Route exact path="/one" component={About}/>
https://reacttraining.com/react-router/web/api/Route/exact-bool