I have a simple react website with some transitions between sites. It works fine but when I refresh website it doesn't work anymore as the url do not match.
I mean - for example inital url is user.github.io/app and when I proceed to pageOne the expected url should be user.github.io/app/pageOne but the url is just user.github.io/pageOne. I've tried HashRouter with basename but to be honest im quite new to React and I do not understand it. HashRouter gives me this strange /#/ which doesn't look to good on a webiste. Any quick way to fix it?
You have asked for code, so here it is (can't post comments that long)
{transitions.map(({ item, props, key }) => (
<animated.div key={key} style={props}>
<Switch location={item}>
<Route path="/react-portfolio" component={PageOne} />
<Route path="*/pathfinding" component={PageOne} />
<Route path="*/easing" component={PageTwo} />
<Route path="*/drinks" component={PageThree} />
</Switch>
</animated.div>
This is the example page transition from Spring docs. There is no router to be honest. Here is the one link code (rest is the same)
<NavLink to="/pathfinding" className="nav-item nav-link" activeClassName="nav-item nav-link active">
Pathfinding
Related
I'm struggling to make React-Router work well with CSSTransition, which seems to be the defacto library for this around the web.
I'm using React-Router v6 without any issue. I'm not sure if the issue is due to that or not being that it is more recent.
Goal
My goal is to animate between my different route with an animation that plays when clicked-in and another that plays when clicked-out.
In term of style, I'm just looking at a simple "Slide-in" animation. Where my first component will slide-in-from-bottom and slide-out-to-bottom before the second component will slide-in-from-right and eventually slide-out-to-right when clicked out. and things like that.
Issues
I can't believe this is so hard to put into practice. I am definitely not the first one that wants to do this.
I'm open to any suggestion that'll work and that uses React-Router.
I have tried to use CSStransition in every way possible so far.
I tried without it and tried making a new functional component that takes in "Location" and "PreviousLocation"(Custom State) in combination with useEffect to animate the div around the route before it is rendered but was way over my head and couldn't make it happen. Not sure how to prevent rendering while keeping what's already rendered and wait for the animation to finish to allow the render.
I would gladly take any help and any method that works at this point.
thanks.
My bare code just for reference (I have discarded everything I've tried and started fresh):
const App = () => {
const location = useLocation();
return (
<div className="app">
<section className="main">
<Routes>
<Route index element={<Home />} />
<Route path="home" element={<Home />} />
<Route path="marketplace" element={<Marketplace />} >
<Route index element={<Listing />} />
<Route path="listing" element={<Listing />} />
<Route path="cart" element={<Cart />} />
</Route>
</Routes>
</section>
<nav className="main-nav">
<ul>
<li>
<NavLink to="/home" className={(navdata) => (navdata.isActive ? 'active' : 'none')} >
<span className="nav-text">Home</span>
</NavLink>
</li>
<li>
<NavLink to="/marketplace" className={(navdata) => (navdata.isActive ? 'active' : 'none')} >
<span className="nav-text">Store</span>
</NavLink>
</li>
<li>
<NavLink to="/aboutus" className={(navdata) => (navdata.isActive ? 'active' : 'none')} >
<span className="nav-text">About Us</span>
</NavLink>
</li>
<li>
<NavLink to="/user" className={(navdata) => (navdata.isActive ? 'active' : 'none')} >
<span className="nav-text">My Account</span>
</NavLink>
</li>
</ul>
</nav>
</div>
);
};
The key part of a solution to creating transitions between routes is dealing with exit transitions, and making sure the old route doesn't disappear instantly so we have time to see the exit. By passing a function as the child of Route, we are able to achieve that.
To achieve a unique transition on each Route we simply need to provide each Route with it's own CSSTransition and set up the css properties for each transition.
A single Route would look like this:
<Route path="/user">
{({ match }) => (
<CSSTransition
in={match != null}
classNames="spin"
timeout={500}
unmountOnExit
>
<div className="absolute">
<Marketplace />
</div>
</CSSTransition>
)}
</Route>
And here is a full example set up in codesandbox with four example of routes with unique transitions. They are not very pleasing animations, but are designed to show the concept clearly.
This page has some great info about how to do this and what potential issues to watch out for, such as the need to use absolute or fixed positioning:
Exit transitions will cause the content of routes to linger until they disappear, which might pose some styling challenges. Make sure that routes don't affect each other's layout, for example you can remove them from the flow of the document by using absolute or fixed positioning.
I am currently using
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
The problem with NavLink of react-router-dom that i am facing now is that the root path "/" is always active, other paths are of no problem and they are being active and inactive during toggle, its just the root path that is giving me trouble, i have searched and tried many solutions. but nothing worked.
Use "exact" and "exact={true}" both, but no success.
Used this:
<NavLink
className="iconContainer"
exact={true}
to="/"
activeClassName="isActive"
>
<span className="menu-title">Home</span>
</NavLink>
and Also this:
<NavLink
className="iconContainer"
exact
to="/"
activeClassName="isActive"
>
<span className="menu-title">Home</span>
</NavLink>
I have been stuck in this situation for past two days, and still no success in finding any solution.
Any help will be appreciated, thanks
Edit:
My routes
<Routes>
<Route
exact
path="order/:orderId"
element={<OrderDetails />}
></Route>
<Route
exact
path="orders"
element={<Orders />}
></Route>
<Route
exact
path="/"
element={<Home />}
></Route>
</Routes>
Exact param will no longer working on NavLink component. In version 6 Beta they have included a new param called: end
With this simply approach you just need to pass end param for your NavLink component and exact to you Route
<NavLink end to="/">
Go to Home
</NavLink>
When you write end="another-class-active" you can change your active className which is active by default.
As #Greg Wozniak mentioned end is a boolean so you can't change active class name with this, instead of this you can pass a function to className:
className={({ isActive }) =>
isActive ? 'activeClassName' : undefined
}
For more information read this:
https://reactrouter.com/docs/en/v6/api#navlink
Working example:
https://codesandbox.io/s/vigorous-thompson-e7k8eb
Note that this is still version Beta so we need to wait for some fixes and official releases
In 6.0.2 you can pass a function to className and that function gets a set of props. One of those props is "isActive". Here is how I solved it for the OP code:
<NavLink
className={(props) => {
return `${props.isActive ? 'isActive ' : ''}iconContainer`;
}}
end
to="/"
>
<span className="menu-title">Home</span>
</NavLink>
Also note that the class "active" is automatically set by the
NavLink.
Also note the use of end: "If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs"
However this how I did it, you don't have to use exact in the case of NavLink as said by the official docs, LINK TO THE DOCS
<NavLink to="/service" className='turner'>
Services
</NavLink>
I have problem with react router.
This is my Router:
<Router>
<div>
<Route exact path="/dashboard" component={projetList} />
<Route path="/dashboard/:id" component={
(props) => <Editor documentID={props.match.params.id} />
} />
</div>
</Router>
And Link to:
<Link to="/dashboard">
<button type="button" class="btn btn-outline-success">
</Link>
Problem description:
When I click my element - browser try to go to the http://localhost:3000/dashboard
but the site is blank.
When I refresh my site (F5 button) then my component load.
Also check out this link: Routes are not navigating when React v15.5 setup with react-redux v5 is. And make sure you put the in the right place. Check this for example :
<browserRouter>
https://pastebin.com/M9hU4Bg4
I have a simple App component with Links to a User index and a Cache index (for a geocaching app). My Links render fine, and when clicked they change the path in the address bar, but nothing changes in the DOM until I refresh the page, at which point the page looks the way it should. What's going on here, and what's the conventional way of dealing with it? I am using Redux as well, if that makes any difference. The following is all of the JSX returned by my App component:
<div>
<nav>
<Link to="/caches">Caches</Link>
<Link to="/users">Users</Link>
</nav>
<div>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" render={() => <div><UserList users={this.props.users}/></div>}/>
<Route path="/caches" component={CacheList}/>
</Switch>
</div>
</div>
Its a common issue with react-router-4.
use {pure: false} in react-redux connect or use withRouter HOC.
React router 4 does not update view on link, but does on refresh
Ive been trying to develop a Web App using react and react-router-dom where the user clicks on a button on of my react routes. I would ideally like the user to be navigated to completely new page after clicking said button.
For reference I have a landing page where I have react router allow the user to switch between either a sign in or sign up form to be displayed on the page
<Router>
<NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link" >
Sign In </NavLink>
or
<NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign Up </NavLink>
<Route exact path="/" component={signUpForm}></Route>
<Route path="/sign-in" component={signInForm}></Route>
<Router>
^Ive left out some of my code but just left the parts regarding react-router
There are buttons on both sign in and sign up pages and I would like to figure out some way, either using react-router or any other method to be able to navigate from these routes as I attempted to use react router again inside of my signUpForm/signInForm files but soon found out you cannot use within a route.
Let me know if I need to clarify anything or provide more information.
Thanks in advance
If your signUpForm and signInForm components are properly defined and imported in the provided file the only thing you need now is to put these <Route .../> elements inside <Switch/> component. I think something like this would help:
<Router>
<NavLink to="/sign-in" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign In </NavLink>
or
<NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign Up </NavLink>
<Switch>
<Route exact path="/" component={signUpForm}/>
<Route path="/sign-in" component={signInForm}/>
</Switch>
<Router>