I should refresh browser to render my component using Routes | ReactJS - reactjs

I have a menu with some routes. I want to show the component that correspond to his route while clicking on the menu. The issue is that, on the click, it changes me the url on my browser but the component displayed doesn't change. I have to refresh manually the page to render the good component. But my aim is to display the good component on the click without refreshing the page.
Here is my Menu.js code :
<Router>
<Link to={'/'} className="nav-link" id="homeLink">
<div className="tableElement active" id="home">
<FontAwesomeIcon icon={ faHome } className="icon"/>
</div>
</Link>
<Link to={'/org'} className="nav-link" id="orgLink">
<div className="tableElement" id="organisation">
<FontAwesomeIcon icon={ faTasks } className="icon"/>
</div>
</Link>
<Link to={'/users'} className="nav-link" id="usersLink">
<div className="tableElement" id="user">
<FontAwesomeIcon icon={ faUsers } className="icon"/>
</div>
</Link>
</Router>
Here is my render method App.js code :
render() {
return (
<Router>
<div className="App">
<LeftMenu/>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/org'
render={ (routeProps) => ( <Organisations {...routeProps} /> ) }
/>
<Route path='/users'
render={ (routeProps) => ( <UserTable {...routeProps} /> ) }
/>
</Switch>
</Router>
);
}
Thanks for your help !

I resolved my issue, I just made a big mistake, my bad.
I just deleted <Router> tags that wrapped my code in Menu.js.
<Link to={'/'} className="nav-link" id="homeLink">
<div className="tableElement active" id="home">
<FontAwesomeIcon icon={ faHome } className="icon"/>
</div>
</Link>
<Link to={'/org'} className="nav-link" id="orgLink">
<div className="tableElement" id="organisation">
<FontAwesomeIcon icon={ faTasks } className="icon"/>
</div>
</Link>
<Link to={'/users'} className="nav-link" id="usersLink">
<div className="tableElement" id="user">
<FontAwesomeIcon icon={ faUsers } className="icon"/>
</div>
</Link>
I believed that <Link> tags should be wrapped by <Router> tags to work. So if you have the same issue, just check if you wrapped your <Link> tags by <Router> tags, and delete them.

Related

Different forms of navigation on different pages | non-global navigation

I currently have a homepage, where I would like to have a sidebar featuring Home, Login, SignUp.
I have a login and sign up page, where I want a regular navbar for which I have right now.
Currently, as I am building the framework for my app, the regular navbar is currently global.
How can make this unglobal, and specify the pages I want the navbar on? As I would like it removed from my homepage so I can build the sidebar accordingly.
App.Js
return (
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link to = '/'>
<div>
<img src ={Logo} alt='Logo' className='Logo'/>
</div>
</Link> <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
</ul>
</div>
</div>
</nav>
<div className="auth-wrapper">
<div className="auth-inner">
<Routes>
<Route path='/' element={<Home />} /> // components on element prop
<Route path="/sign-in" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
</Routes>
</div>
</div>
</div>
);
}
export default App;
Home
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Sidebar page</h1>
</div>
);
}
}
Sidebar
//sidebar.js
import React, { Component } from "react";
export default class Sidebar extends Component {
render() {
return (
<div className="sidebar-container">
<div className="sidebar">
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
</div>
</div>
);
}
}

React router dom set active class to the NavLink

I am using React-router-dom for navigation
Routes.js
<Router>
<Switch>
<Route path="/" exact component={HomePage} activeClassName="routeActive"/>
<Route path="/login" exact component={Login} activeClassName="routeActive"/>
<Route path="/category/veg" exact component={Veg} activeClassName="routeActive"/>
<Route path="/category/non-veg" exact component={NonVeg} activeClassName="routeActive"/>
</Switch>
</Router>
then in my Navbar component i have
<div className="leftNavItems">
<ul className="navItemsUL">
<li className="navItemsLI">
<NavLink to="/" exact className="linkText" activeClassName="routeActive">
Home
</NavLink>
</li>
<li className="navItemsLI">
<NavLink to="/login" exact className="linkText" activeClassName="routeActive">
About us
</NavLink>
</li>
<div className="dropdown">
{console.log(props)}
{props.location}
<span className={` linkText`}>Categories </span>
<i className="fas fa-caret-down downIcon" />
<div className="dropdownContent">
<ul className="dropdownContentUL">
<li className="dropdownContentLI">
<Link to="/category/:veg" className="dropdownLinkText">
Veg
</Link>
</li>
<li className="dropdownContentLI">
<Link to="/category/:non-veg" className="dropdownLinkText">
Non Veg
</Link>
</li>
</ul>
</div>
</div>
</ul>
</div>
so as u can see i have used "activeClassName" for the Navlink to set className and then change its color if it is active but there is a case where i have a label "Category" which has a dropdown menu that contains for "veg" and "non-veg", so what i want is also need to change the color of "Category" label when the user is in either /category/veg or /caegory/:non-veg as it is Navbar Component console.log(props.location) is undefined over here bacause it is not insise i suppose. Any other way around here >
first, about console.log(props.location) turns to undefined, are you sure you wrapped the component with withRouter? also if it is a function component you can use the hook let location = useLocation()
second, you can control the class name manually like
<span className={`${props.location.pathname.split('/').includes('category') ? 'routeActive' : 'linkText' }`}>Categories </span>

React Router not changing sub page

In my App.js i have a navbar and a router switch that takes me to admin page
<Router>
<Navbar />
<Switch>
<Route exact path='/' component={Welcome} />
<AdminRoute path='/admin' component={Admin} />
My Admin component have a sub router as follows:
<Router>
<SubNav />
<Switch>
<Route exact path={`${match.path}/planners`} component={Planners} />
<Route exact path={`${match.path}/`} component = {Admin}>
</Switch>
</Router>
If i go to www.mysite/admin everything works fine and my SubNav links work fine. My issue is the my Navbar has links such as
<Typography
to='/admin/planners'
component={Link}
>
Planners
</Typography>
<Typography
to='/admin'
component={Link}
>
Admin
</Typography>
The moment i route to a subpage the Navbar links stop changing the subpages although they are changing the URL just fine. Linking from the Navbar at first time works then if i try clicking on Admin it does not route to / again.
I solved this by removing the <Switch> and removing the <Router> from the Admin component. <Route> alone without wrapping it with a <Router> was sufficient
Below is a code that explains the behavior
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Resource1({ match }) {
return (
<div>
<h3>Resource1</h3>
<p>Resource1 Descriotion</p>
</div>
);
}
function Resource2({ match }) {
return (
<div>
<h3>Resource2</h3>
<p>Resource2 Descriotion</p>
</div>
);
}
function Topic1({ match }) {
return (
<div>
<h2>Topic1</h2>
<p>Topic1 Description</p>
<ul>
<li>
<Link to={`${match.url}/resource1`}>Resource 1</Link>
</li>
<li>
<Link to={`${match.url}/resource2`}>Resource 2</Link>
</li>
</ul>
<hr />
<Route path={`${match.path}/resource1`} component={Resource1} />
<Route path={`${match.path}/resource2`} component={Resource2} />
</div>
);
}
function Topic2({ match }) {
return (
<div>
<h2>Topic2</h2>
<p>Topic2 Description</p>
<ul>
<li>
<Link to={`${match.url}/resource1`}>Resource 1</Link>
</li>
<li>
<Link to={`${match.url}/resource2`}>Resource 2</Link>
</li>
</ul>
<hr />
<Route path={`${match.path}/resource1`} component={Resource1} />
<Route path={`${match.path}/resource2`} component={Resource2} />
</div>
);
}
function Topics({ match }) {
return (
<div>
<h1>Topics</h1>
<ul>
<li>
<Link to={`${match.url}/topic1`}>Topic 1</Link>
</li>
<li>
<Link to={`${match.url}/topic2`}>Topic 2</Link>
</li>
</ul>
<hr />
<Route path={`${match.path}/topic1`} component={Topic1} />
<Route path={`${match.path}/topic2`} component={Topic2} />
</div>
);
}
function Home() {
return <h1>Home</h1>;
}
class App extends React.Component {
render() {
return (
<Router>
<div style={{ width: 1000, margin: '0 auto' }}>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/topics'>Topics</Link>
</li>
<li>
<Link to='/topics/topic1/resource1'>Resource 1</Link>
</li>
</ul>
<hr />
<Route exact path='/' component={Home} />
<Route path='/topics' component={Topics} />
</div>
</Router>
);
}
}
export default App;

React router the page won't stop reloading

building simple react website for practice and trying to add routes so my menu will work.
I tried a few ways and looked a lot in stackoverflow didn't find working solution for my problem.
I'm not sure where to place the Router should i put it where my navbar located or in the index where i render the App?. No matter what i tried it's just getting stuck in reloading mode.
This is my latest try: i try to replace the bootstrap menu links with Link> as it looks here:
Link
still the same result stuck on reloading
The Header code where the menu code is:
function Header(props) {
return (
<header>
<div className="container">
<nav class="navbar navbar-expand-md navbar-light">
<div class="mx-auto order-0">
<a
className="brand-stype"
className="navbar-brand mx-auto"
href="/"
>
home
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".dual-collapse2"
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<NavItem eventKey={1} href="/">
<NavLink exact activeClassName="active" to="/about">
about
</NavLink>
</NavItem>
</ul>
</div>
</nav>
</div>
</header>
);
}
My App.js code
const App = () => {
return (
<div>
<div className="all-containers">
<Header />
<Photos />
</div>
<HowItWorks />
<Calc />
<Insta />
<Footer />
<Switch>
<Route exact path='/' component={App} />
<Route exact path='/about' component={About} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
);
};
export default App;
My index.js file
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
);
The error i got after adding Router as said in the comment below:
You should put your router and the top lvl:
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
It just injects necessary things using context so you can freely use router anywhere in your application.

React router doesnt route when clicking on link

so i have a header component with a couple of links:
{
this.props.cats.map(x =>
<li className="nav-item" key={x.path}><Link className="nav-link" to={x.path}>{x.name}</Link></li>)
}
The code snippet above is what i use to render the links
Then in my index.js(root) i use <BrowserRouter/> and it encompasses the whole element.
My question is to do with the routing i have implemented.
<Header />
<Switch>
<Route exact path='/' component={(props) => <PostList cat='all' posts={this.props.posts} />} />
<Route exact path='/:category' component={(props) => {
console.log(props.match.url)
return <PostList cat='filter' posts={this.props} />
}} />
</Switch>
When i click on the link to take me to say path "/test" it should be picked up by the second Route element and every time it changes it should display the link, it doesn't. It will only change if i do a hard refresh.
Any idea on what i could be doing wrong?
Edit* included header component
<nav className="navbar navbar-expand-sm navbar-light bg-light mb-3">
<div className="container">
<Link className="navbar-brand" to='/'>Navbar</Link>
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="ml-auto navbar-nav">
{
this.props.cats.map(x =>
<li className="nav-item" key={x.path}><Link className="nav-link" to={x.path}>{x.name}</Link></li>)
}
</ul>
</div>
</div>
</nav>
Link is now part of 'react-router-dom', make sure you have imported it from there ,if this doesn't solve your problem then try to wrap your component with withRouter

Resources