Comments (15)
You don't actually need to render your route in order for links to find it. You just need to register it with the RouteStore
. Maybe we should expose RouteStore.registerRoute
as a high-level method for testing purposes?
var Router = require('react-nested-router');
var routes = require('../app/routes');
Router.register(routes);
from react-router.
Seems good.
Cons
Something I really don't like is having to do things differently for tests v. app code. If we instead just warn, then developers don't have to know anything extra to test their route handlers.
Pros
However, if we just warn, applications could have busted links due to typos and tracking those down could get difficult, throwing an error stops you in your tracks, ensuring your app works before you ship it.
Additionally, not requiring a render is good so that you don't have to worry about everything your app is going to do with the initial handlers (like fetching user data, etc.)
I'd say yes, lets expose register
. Wonder if we need a more explicit name like registerForTesting
so that its clearly not intended to be used for anything else (unless anybody can think of a use-case where you'd want to register routes like this outside of testing).
from react-router.
Would the register
method be useful for server side rendering?
from react-router.
@phated Yes, it would.
Basically register
would just be sugar for RouteStore.registerRoute
which is the method that populates the RouteStore
with all the route data that Link
s need to know their href
and whether or not they are active. When you mount a Route
in the DOM, this is done for you. On the server, or in testing scenarios, we need to register all routes manually.
@rpflorence If we had a use for a Router()
function, this would be it.
from react-router.
Yeah, before we went to just a component this testing scenario simply required pulling in your route config, no rendering required.
Sent from my iPhone
On Jul 3, 2014, at 7:35 PM, Michael Jackson [email protected] wrote:
@phated Yes, it would.
Basically register would just be sugar for RouteStore.registerRoute which is the method that populates the RouteStore with all the route data that Links need to know their href and whether or not they are active. When you mount a Route in the DOM, this is done for you. On the server, or in testing scenarios, we need to register all routes manually.
@rpflorence If we had a use for a Router() function, this would be it.
—
Reply to this email directly or view it on GitHub.
from react-router.
I removed the Router()
function because I wanted to have something that I could pass to React.renderComponent
instead of creating our own renderComponent
method. I haven't written too much component testing code, but I think that most of it would require you to mount your component in the DOM, so it may not be unfamiliar to React devs.
from react-router.
Router.registerRoutes(routes)
then? I'm not excited about exposing the store so I'd rather just add it to the top-level module, I'm still a little unclear on the server-rendering use-case.
from react-router.
👍 for Router.registerRoutes
. Particularly when paired with Router.makeHref
.
from react-router.
The other potential benefit of Router.register
would be ad-hoc routing, which is a frequently annoying but quite common use-case.
Something like:
Router.register Route
name: 'foobar'
handler: React.createComponent
render: ->
div {}, 'foobar'
(note the space between register and Route)
I prefer (and it seems like you guys do, too) an explicit routing table, but this functionality is present in many modern web systems.
from react-router.
(note the space between register and Route)
only somebody dealing with coffeescript pain daily would say something like this :P
from react-router.
Ha! One man's pain is another man's pleasure 😎
I thought it was worth pointing out, but perhaps a newline would've been a better way to do that.
from react-router.
I'm not so convinced we need this anymore. I haven't really seen any solid use cases.
from react-router.
I'm testing a generic WorkflowItem
link component that passes down props to the anchor. Which means its unit tests really don't care about a full application routing table. I'm still fleshing out this test right now but here's where it stands: (in CoffeeScript, sorry about your virgin eyes!)
WorkflowItem = require '../../../assets/scripts/widgets/workflow/workflow-item'
{Router, Routes, Route} = require 'react-router'
RouteStore = require 'react-router/modules/stores/RouteStore'
ActiveStore = require 'react-router/modules/stores/ActiveStore'
describe 'Workflow Item', ->
route = <Route name='somewhere' handler={EmptyComponent}/>
beforeEach ->
TestUtils.renderIntoDocument <Routes>{route}</Routes>
afterEach ->
ActiveStore.updateState undefined
RouteStore.unregisterAllRoutes()
...
it 'routes to', ->
instance = TestUtils.renderIntoDocument <WorkflowItem to='somewhere' />
anchor = TestUtils.findRenderedDOMComponentWithTag(instance, 'a')
TestUtils.Simulate.click anchor, button: 0
ActiveStore.isActive(route).should.be.true
And the component I'm testing:
React = require 'react'
IsActiveMixin = require 'react-router-bootstrap/lib/IsActiveMixin'
cx = React.addons.classSet
WorkflowItem = React.createClass
displayName: 'WorkflowItem'
mixins: [IsActiveMixin]
additionalReservedProps:
complete: true
propTypes:
to: React.PropTypes.string.isRequired
complete: React.PropTypes.bool
render: ->
classes =
'workflow-item': true
'workflow-item-incomplete': @props.complete? and [email protected]
'workflow-item-complete': @props.complete
'workflow-item-todo': [email protected]?
active: @props.to and @state.isActive
<li className={cx classes}>
<a href={@getHref()} onClick={@handleRouteTo}>
{@props.children}
</a>
</li>
module.exports = WorkflowItem
The issue I'm running into right now is that the simulate click is not actually routing, even though debugging through the transitionTo call is getting invoked properly. The IsActiveMixin
is coming from react-router-bootstrap.
I demonstrate this example, because I feel that it is a fine example that you shouldn't need a full blown route table to test something trivial like this.
from react-router.
Now that we have RouteStore.registerRoutes we can close this.
from react-router.
👍
from react-router.
Related Issues (20)
- [Docs]: Tutorial missing imports within 'contacts.js'. [ "match-sorter" , "localforage" , "sort-by" ] HOT 1
- [Bug]: history.listen not triggered on hash changes HOT 1
- [Bug]: Update comments recommending to use polyfill.io HOT 3
- [Docs]: Nested Routes are essentially undocumented HOT 5
- [Bug]: unstable_patchRoutesOnMiss is superseded by "*" (404) HOT 3
- [Bug]: unstable_patchRoutesOnMiss leaf ignored when patching sub-trees asyncronously HOT 3
- [Bug]: Functional updates to `useSearchParams` don't get updated values HOT 2
- Update to isbot@5 HOT 1
- [Bug]: `unstable_patchRoutesOnMiss` remote module error-handling HOT 13
- [Bug]: useMatch does not decode params HOT 4
- [Bug]: Could not resolve './utils' from packages/router/index.ts HOT 2
- [Bug]: Link when used with Outlet is not working. It is routing to error page when clicked. HOT 1
- [Bug]: setSearchParams from useSearchParams remove hash HOT 1
- [Bug]: HashRouter need to wrapped twice HOT 1
- [Docs]: docs show reach/router instead of react/router HOT 2
- [Bug]: "react-router-dom-v5-compat" <CompatRouter> doesn't unsubscribe from history potentially causing tests to memory leak HOT 2
- [Bug]: child loader redirect overrides parent loader error HOT 7
- [Bug]: v7_partialHydration with unstable_patchRoutesOnMiss: hydrateFallbackElement not shown on patched routes HOT 3
- [Bug]: Relative path does not work as expected in outlets HOT 1
- [Bug]: useNavigate causes component to rerender 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.