Comments (13)
Yeah, that seems weird.
Sent from my iPhone
On Jul 9, 2014, at 2:14 AM, Aliaksei [email protected] wrote:
It seems now that the root hander will be inited and rendered twice, because root Route calls render first time on initial and the second time after parsing URL and setState. It means Route creates two instances of handler and any functionality in render and componentDidMount is called twice almost at the same time, what is totally confusing and can lead to strange bugs.
// in each controller
componentDidMount: function() {
console.log(name);
}// output
FrontController
FrontController
PageController
SubPageController
—
Reply to this email directly or view it on GitHub.
from react-router.
This is expected behavior. Your render
function shouldn't have weird side effects.
from react-router.
@mjackson can you give a quick explanation on why this is expected?
from react-router.
It's expected because we need some time to run the willTransitionTo
hooks. We don't know the state until after they run. If we were to set state immediately, users could see a flash of something they're not supposed to, like a page that requires auth.
But anyway, your render
function should be able to be called many times without creating side effects, so this shouldn't be an issue.
from react-router.
oh that's right, thanks, was not firing on all cylinders for a minute there.
On Wed, Jul 9, 2014 at 11:04 AM, Michael Jackson [email protected]
wrote:
It's expected because we need some time to run the willTransitionTo
hooks. We don't know the state until after they run. If we were to set
state immediately, users could see a flash of something they're not
supposed to, like a page that requires auth.But anyway, your render function should be able to be called many times
without creating side effects, so this shouldn't be an issue.—
Reply to this email directly or view it on GitHub
#77 (comment)
.
from react-router.
Is it not possible to render nothing while waiting for willTransitionTo
hooks on the initial render?
from react-router.
@spicyj The idea is that this.props.activeRoute
will be undefined
, so when you use it in your render
function, you are essentially rendering nothing.
The other option would be to somehow tap into React.renderComponent
to stop it from trying to render something until we're ready, or to possibly create our own renderComponent
method which we used to have, but I'd like to avoid.
from react-router.
sure, just branch in render on whatever you're waiting for, probably some state in a store somewhere, or props.activeRoute
from react-router.
Maybe I'm not understanding still, but why does the root component (FrontController in the above example) need to be rendered before the URL is parsed? Something like:
render: function () {
if (!this.state.path) {
return null;
}
return this.props.handler(computeHandlerProps(this.state.matches || [], this.state.activeQuery));
}
from react-router.
@spicyj Doesn't React 0.10 get mad if you return null
from render
?
from react-router.
BTW, I'd love to be able to return null
, and in fact we tried that approach in an earlier version of this lib. But as I recall React threw an Error.
from react-router.
Sorry, you're right; it does. You could return <div />
until React 0.11 comes out.
from react-router.
@spicyj That's a good idea. I think it will prevent a lot of confusion. Looking forward to 0.11! :D
from react-router.
Related Issues (20)
- [Bug]: useBlocker is not working HOT 5
- [Bug]: Cannot navigate in windows production HOT 2
- [Bug]: Unable to Pass State Using useNavigate When Navigating Back to Previous Route HOT 1
- [Bug]: Navigation don't work with createBrowserRouter sometimes HOT 2
- [Bug]: lazy loaded module error in nested router is catched only by the parent route with the * wildcard, not by the `errorElement` in the nested router HOT 2
- [Bug]: `fetcher.data` is define when submitting via `fetcher.submit` but is undefined when submitting a `fetcher.Form` HOT 3
- [Bug]: Navigation from '//' pathname does not work; path '*' is not matching the '//' page HOT 1
- [Bug]: Getting "A router only supports one blocker at a time" warning when running your navigation-blocking example HOT 1
- [Bug]: `setSearchParams` do not provide the latest queryString passed as argument to `navigate` HOT 3
- [Bug]: React Router swallows render error HOT 1
- [Bug]: useBlocker in createBrowserRouter is not working
- [Bug]: useLocation value being null when 0 is set as the state value of useNavigate
- [Docs]: for useSearchParams, functional updates should be explained in more detail HOT 3
- [Bug]: React router doesn't handle 'content://' URLs
- [Bug]: the state is not destroyed in the useFetcher hook with key parametr
- [Bug]: Outlet component remounts in production when changing state above it HOT 2
- [Bug]: loader of Route running even if Route / Router is not rendered HOT 2
- [Docs]: Docs for shouldRevalidate make it sound like it is only for opting out
- [Bug]: `useLocation` out of sync with `history.location`, leads to potential renders of unmatched `Route`s
- [Bug]: useLoaderData triggers component re rendering even if the route remains unchanged HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router.