Comments (19)
It would allow me have completely isolated components.
Say I have a User module that will have the following views. Edit, List,
Show. I could then define all those inside UsersModule.js and then include
it in the top level of my app with the route suffix of /user
Then if you go to /user/edit
it will then show the UserEdit page which is
defined inside the UserModule.
I hope that makes sense.
On Jun 1, 2014 11:47 PM, "Ryan Florence" [email protected] wrote:
Not right now.
I personally really like seeing all of the routes for an app in one place.
I can't think of a better way to construct a mental image of an
application
than this. It's been extremely useful in ember for me.What is the value in having your routes defined all over the application?
On Sat, May 31, 2014 at 9:00 AM, Matt Aitchison [email protected]
wrote:
Is there any way to do the following?
Main
Profile
Explore
I would like to do this to separate my app out so i don't have to
include
every component/route in the Main handler.—
Reply to this email directly or view it on GitHub
#15.—
Reply to this email directly or view it on GitHub
#15 (comment)
.
from react-router.
The huge-apps example is a good one to demonstrate were routes in separate files makes sense.
How do I achieve that writing the routes with JSX?
from react-router.
Compartmentalizing routes with the corresponding components is very analogous to what a lot of express middleware do where internally they define a app = new express.Router()
, then route relative to that, then you can mount that middleare anywhere you want. I agree 100% with the idea that this would be extremely useful in react-router. If someone creates a cool image navigation component where in theory I could have nested routes like /user/81 with /images/[12|new|12/edit] etc but without me having to do that wiring myself that would be awesome. The usefulness of this use case well demonstrated in express as an example.
Also compartmentalizing need not mean coupling. If you can require then mount the set of routes, there is no reason you couldn't require each component independently if you wanted to and wire them up however you wanted.
from react-router.
Well you could have more than 40 routes on certain apps and that would be a
lot to have all in one spot.
I feel that defining every route in one place breaks the isolation that
react is supposed to provide.
Yeah I was thinking about that but I couldn't think of how to do it. I
came up with another solution though.
Thanks!
On Jun 1, 2014 11:56 PM, "Ryan Florence" [email protected] wrote:
How is it helpful to have the route definition away from the rest of the
routes?Your components are still isolated, the route definitions simply bring
them
all together as an application.You can also write a static function on User that returns the routes you
want if you find value in moving route definitions away from the
application and into a component.<Routes> {User.routes()} {Dashboard.routes()} </Routes>On Sun, Jun 1, 2014 at 7:52 AM, Matt Aitchison [email protected]
wrote:It would allow me have completely isolated components.
Say I have a User module that will have the following views. Edit, List,
Show. I could then define all those inside UsersModule.js and then
include
it in the top level of my app with the route suffix of/user
Then if you go to
/user/edit
it will then show the UserEdit page which
is
defined inside the UserModule.I hope that makes sense.
On Jun 1, 2014 11:47 PM, "Ryan Florence" [email protected]
wrote:Not right now.
I personally really like seeing all of the routes for an app in one
place.
I can't think of a better way to construct a mental image of an
application
than this. It's been extremely useful in ember for me.What is the value in having your routes defined all over the
application?On Sat, May 31, 2014 at 9:00 AM, Matt Aitchison <
[email protected]>wrote:
Is there any way to do the following?
Main
Profile
Explore
I would like to do this to separate my app out so i don't have to
include
every component/route in the Main handler.—
Reply to this email directly or view it on GitHub
#15.—
Reply to this email directly or view it on GitHub
<https://github.com/rpflorence/react-router/issues/15#issuecomment-44778151>
.
—
Reply to this email directly or view it on GitHub
<
https://github.com/rpflorence/react-router/issues/15#issuecomment-44778279>.
—
Reply to this email directly or view it on GitHub
#15 (comment)
.
from react-router.
It's server and client. I've been using this starter kit which seems to handle routing totally different with a method like below.
await Router.dispatch({ path: req.path, context }, (state, component) => {
data.body = ReactDOM.renderToString(component);
data.css = css.join('');
});
After your comment I've been reading all the tutorials on async routes. Looks like what I'm asking is completely possible, but I can't see how it fits in with the method used above. I've asked a more relevant question over on the react starter kit repo though.
Cheers.
from react-router.
Not right now.
I personally really like seeing all of the routes for an app in one place.
I can't think of a better way to construct a mental image of an application
than this. It's been extremely useful in ember for me.
What is the value in having your routes defined all over the application?
On Sat, May 31, 2014 at 9:00 AM, Matt Aitchison [email protected]
wrote:
Is there any way to do the following?
Main
<Routes handler={App}> <Profile path="profile" /> <Explore path="explore" /> </Routes>
Profile
<Route> <Route name="dashboard" handler={ProfileDashboard} /> <Route name="repos" handler={ProfileRepos} /> </Route>
Explore
<Route> <Route name="home" handler={ExploreHome} /> <Route name="showcase" handler={ExploreShowcase} /> </Route>
I would like to do this to separate my app out so i don't have to include
every component/route in the Main handler.—
Reply to this email directly or view it on GitHub
#15.
from react-router.
Note the partial app loading example, you only need a tiny handler for each
route and then you can fill in later with a full definitions.
On Sun, Jun 1, 2014 at 7:47 AM, Ryan Florence [email protected] wrote:
Not right now.
I personally really like seeing all of the routes for an app in one place.
I can't think of a better way to construct a mental image of an application
than this. It's been extremely useful in ember for me.What is the value in having your routes defined all over the application?
On Sat, May 31, 2014 at 9:00 AM, Matt Aitchison [email protected]
wrote:Is there any way to do the following?
Main
<Routes handler={App}> <Profile path="profile" /> <Explore path="explore" /> </Routes>
Profile
<Route> <Route name="dashboard" handler={ProfileDashboard} /> <Route name="repos" handler={ProfileRepos} /> </Route>
Explore
<Route> <Route name="home" handler={ExploreHome} /> <Route name="showcase" handler={ExploreShowcase} /> </Route>
I would like to do this to separate my app out so i don't have to include
every component/route in the Main handler.—
Reply to this email directly or view it on GitHub
#15.
from react-router.
How is it helpful to have the route definition away from the rest of the
routes?
Your components are still isolated, the route definitions simply bring them
all together as an application.
You can also write a static function on User that returns the routes you
want if you find value in moving route definitions away from the
application and into a component.
<Routes>
{User.routes()}
{Dashboard.routes()}
</Routes>
When you consider a server-side app, do you define your routes in multiple places?
from react-router.
Your components are still isolated. Routes are not components, they are simply config objects stripped of their properties to explain the relationship between components.
You have to define the relationship between components eventually. Doing what you proposed up top or what I think is best practice doesn't make anything more or less isolated, its simply a matter of how many steps until you find the configuration.
I've worked on an ember app with 60+ routes, it was absolutely fantastic to be able to see how the application was stitched together.
Consider getting a bug report with the url of /project/123/tasks/343/files/24521
.
You can either bounce around your app trying to find where that route is configured or you can go to a single place and see which handler you need to look at immediately.
from react-router.
@MattAitchison FWIW I originally thought about this issue the same way you are but have since been swayed by @rpflorence's (and Ember's) thinking on this. The router does nothing to couple your components. If anything, it keeps them more cleanly separated by only requiring you to use {this.props.activeRoute}
in your components' render
method, as opposed to putting the name of some other component there.
I'm closing this for now. Will gladly reopen if/when we have a convincing use case.
from react-router.
@mjackson Yes but defining every route in a single spot does couple things. Now the only way your 'files' component can /edit /delete or anything else is by adding all of it's routes multiple times in the Main apps render method.
from react-router.
@MattAitchison What do you mean multiple times?
Might be relevant, we do need to add the *wildcard so you can have something like a mock filesystem:
<Routes>
<Route name="file" path="files/*" handler={File}
</Routes>
And that would allow for any routes at /folder/folder2/file.txt
types of urls.
from react-router.
Something like the following would be nice to implement. https://github.com/andreypopp/rrouter/blob/master/lib/__tests__/matchRoutes-test.js#L233-L249
from react-router.
I still don't get it.
Why couple your components together by having route definitions in the components?
And what do you mean "adding all of its routes multiple times in the Main apps render method"?
from react-router.
I think I have an interesting use case for this. I have a website where users get their own '/mypage' type thing. Depending on what they've configured they may wish to serve up a different react application. e.g. they may have ticked 'portfolio' which means a portfolio react app will be served up, or they may have ticked 'blog' which means a blog react app should be served up.
I currently have this code on my router but I can't see how I can accomplish my sub react apps to have their own router definitions.
on('/:handle', async (state) => {
let handle = await getSiteHandleByName(state.params.handle)
if (! handle)
return <NotFoundPage />
// I could return an app, but how do I configure custom routes at this point?
return <p>{handle.userId}'s page</p>
});
from react-router.
This is totally server-side no? You'd just serve two entirely separate apps. Or use the async routes stuff to only load the one you need.
from react-router.
I totally agree.
I'm building an application which is basically an administration system for whatever modules I might build (custom CMS anybody? ;) ), when I install a certain module I might, or might not want a section for that specific module, and it would be awesome to be able to route that from its own isolated environment without having to generate code that does that for me.
But maybe async and dynamically load the needed routes and whatnot is the way to go?
from react-router.
The problem on the client side is that, with the way React mounts components, using nested components and React lifecycle hooks for data fetching will lead to waterfalled requests.
As a different pattern, we support highly compartmentalized route configs. This lets you isolate specific portions of your application (and embed them as sub-applications on specific paths), while not losing the benefits of top-level routing.
from react-router.
(see e.g. the huge-apps example to see how this works in practice)
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.