Giter Site home page Giter Site logo

Comments (19)

mattatcha avatar mattatcha commented on March 29, 2024 2

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.

rodrigoruiz avatar rodrigoruiz commented on March 29, 2024 2

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.

eagsalazar avatar eagsalazar commented on March 29, 2024 2

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.

mattatcha avatar mattatcha commented on March 29, 2024 1

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.

AlastairTaft avatar AlastairTaft commented on March 29, 2024 1

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.

ryanflorence avatar ryanflorence commented on March 29, 2024

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.

ryanflorence avatar ryanflorence commented on March 29, 2024

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.

ryanflorence avatar ryanflorence commented on March 29, 2024

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.

ryanflorence avatar ryanflorence commented on March 29, 2024

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.

mjackson avatar mjackson commented on March 29, 2024

@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.

mattatcha avatar mattatcha commented on March 29, 2024

@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.

ryanflorence avatar ryanflorence commented on March 29, 2024

@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.

mattatcha avatar mattatcha commented on March 29, 2024

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.

ryanflorence avatar ryanflorence commented on March 29, 2024

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.

AlastairTaft avatar AlastairTaft commented on March 29, 2024

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.

taion avatar taion commented on March 29, 2024

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.

rockymontana avatar rockymontana commented on March 29, 2024

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.

taion avatar taion commented on March 29, 2024

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.

taion avatar taion commented on March 29, 2024

(see e.g. the huge-apps example to see how this works in practice)

from react-router.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.