Routing

[Mewriick]

Hello,

I have little bit struggling with the routing. I have one page (Index) with the list of items and I want to route to their details. For first request it is for good, but the problem is when I select another item, routing is not working. I follow yours tutorial so ApplicationDetail view model has registred OnRouted event. But from network snapshot is obvious that the second request for detail is not received.

Here are my project structure and components.

Here is the network communication

Here are compontenst:

import React from 'react';
import dotnetify from 'dotnetify';
import ReactDOM from 'react-dom';
import { RouteLink, RouteTarget } from 'dotnetify/dist/dotnetify-react.router'

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.vm = dotnetify.react.connect("Index", this);
        this.vm.onRouteEnter = (path, template) => {
            template.Target = "ApplicationMonitor";
            //// Must dismount existing component on RouteTarget before mounting a new one.
            //if (this.applicationMonitor && this.hasApplicationLoaded) {
            //    ReactDOM.unmountComponentAtNode(this.applicationMonitor.getDOMNode());
            //    this.setState({ open: false });
            //}
            //this.hasApplicationLoaded = true;
        }
        this.state = { Applications: undefined };
    }

    componentWillUnmount() {
        //ReactDOM.unmountComponentAtNode(this.applicationMonitor.getDOMNode());
        this.vm.$destroy();
    }

    render() {
        if (this.state.Applications == null)
            return <div></div>
        const apps = this.state.Applications.map(app =>
            <RouteLink vm={this.vm} route={app.Route} key={app.Info.Id}>
                <div key={"div" + app.Info.Id} className="book col-md-3">
                    <strong>{app.Info.Name}</strong>
                </div>
            </RouteLink>
        )
        return (
            <div className="row">
                {apps}
                <div id="ApplicationMonitor" />
                
            </div>
        );
    }
}
export class Home extends React.Component {
    render() {
        return (
               <div>Home</div>
        );
    }
}
export default Index;

import React from 'react';
import dotnetify from 'dotnetify';

class ApplicationDetail extends React.Component {
    constructor(props) {
        super(props);
        this.vm = dotnetify.react.connect("ApplicationDetail", this);
        this.state = { CurrentApplication: { Id : 0, Name: ""} };      
    }
    componentWillUnmount() {
        this.vm.$destroy();
    }
    render() {
        var app = this.state.CurrentApplication;
        return (
            <div className="row">
                {app.Name}
            </div>
        )
    }
}

export default ApplicationDetail;

ViewModels

    public class Index : BaseVM, IRoutable
    {
        private readonly IApplicationListFacade _appListFacade;

        public RoutingState RoutingState { get; set; }

        public IEnumerable<object> Applications { get; set; }

        public Index(IApplicationListFacade applicationListFacade)
        {
            _appListFacade = applicationListFacade;

            this.RegisterRoutes(Constants.ROUTE_ROOOT, new List<RouteTemplate>
            {
                new RouteTemplate(Constants.DEFAULT_ROUTE) { UrlPattern = string.Empty },
                new RouteTemplate(Constants.APPLICATION_DETAIL_ROUTE) { UrlPattern = Constants.APPLICATION_ID_ROUTE_PATTERN, VMType = typeof(ApplicationDetail) },
            });

            Applications = _appListFacade.GetApplications()
                                          .Select(app =>
                                            new
                                            {
                                                Info = app,
                                                Route = this.GetRoute(Constants.APPLICATION_DETAIL_ROUTE, $"{Constants.APPLICATION_ROUTE_PATTERN}{app.Id}")
                                            }
                                          );

            Changed(nameof(Applications));
            PushUpdates();
        }
    }

    public class ApplicationDetail : BaseVM, IRoutable
    {
        private readonly IApplicationListFacade _appListFacade;

        public RoutingState RoutingState { get; set; }

        public Application CurrentApplication { get; set; }

        public ApplicationDetail(IApplicationListFacade applicationListFacade)
        {
            _appListFacade = applicationListFacade;

            this.OnRouted((sender, e) =>
            {
                if (!string.IsNullOrEmpty(e.From))
                {
                    var applicationId = e.From.Replace(Constants.APPLICATION_ROUTE_PATTERN, string.Empty);
                    if (int.TryParse(applicationId, out var id))
                    {
                        CurrentApplication = _appListFacade.GetApplicationById(id);
                        Changed(nameof(CurrentApplication));
                    }
                }
            });
        }
    }

    public static class Constants
    {
        public const string ROUTE_ROOOT = "Index";
        public const string DEFAULT_ROUTE = "Home";
        public const string APPLICATION_DETAIL_ROUTE = "ApplicationDetail";
        public const string APPLICATION_ROUTE_PATTERN = "ApplicationDetail/";
        public const string APPLICATION_ID_ROUTE_PATTERN = "ApplicationDetail(/:Id)";
    }

I do not know whats wrong. Can you help me please?

[Mewriick]

I update original post and add code also for ViewModels

[dsuryd]

A bug is causing your use case to fail (routing to the same template but different param on a static dom target.)

Replace the file under your node_modules\dotnetify\dist with this one: dotnetify-react.js v1.0.3-beta, and rebuild the webpack bundle. Let me know how it goes. Thanks!

[Mewriick]

Now it is working like a charm. Thanks a lot! Maybe sometimes event OnRouted on server is not reached after selecting item. I noticed it also in your Routing example for react in VS2017. In console is log that ModelView received it but OnRouted event is not invoked.

[dhirajg27]

My API service and ReactJs Apps are hosted in different servers. Is there is any way to configure hub url in reactjs app?

[dsuryd]

If you're using create-react-app boilerplate, configure "proxy" in package.json to your API server. If not, use SignalR API to set it before calling dotnetify:

$.connection.hub.url = "<uri>/signalr"

BTW, pls create new issue as this doesn't seem to be related to this thread.

[dsuryd]

Mewriick, I only noticed just now that you left a comment after you said that 'it's working':

Maybe sometimes event OnRouted on server is not reached after selecting item. I noticed it also in your Routing example for react in VS2017. In console is log that ModelView received it but OnRouted event is not invoked.

In that routing example, the clickable div area of the buttons in page 2 is wider than the actual route anchor tag, so it can give the impression that you click a button (close to its edge) but it doesn't trigger the OnRouted event. Would this explain what you saw?

[dsuryd]

Fix included in npm v2.0.5-beta.