me-12 / single-spa-portal-example

Example project on how to combine multiple SPA's on a single Website
MIT License
407 stars 136 forks source link

React child app routing : blank content #36

Open paskalander opened 6 years ago

paskalander commented 6 years ago

Hello,

I'm trying to use the history api to push states from the portal and then use it in the app (React). The mail state is correctly loaded by the child app. But when I navigate in it, the routing works but the rendering returns blank content.

Here is how I push the state from the portal in the index.html :

<a class="p-2 text-dark" onclick="history.pushState(null, 'persons', '/persons');">Persons</a>

The single spa loader runs my app perfectly and I land in the main route. Here is the React loaded app Router :

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route path="/persons" exact component={PersonsList}/>
            <Route path="/persons/:id" component={Person} />
            <Route component={Error}/>
        </Switch>
    </BrowserRouter>
);

export default Router;

The PersonsList is defined as following :

handleRedirection = (aPerson) => {
    this.props.history.push(`/persons/${aPerson.id}`);
}

...

{this.state.persons.map(aPerson => (
    <React.Fragment key={aPerson.id}>
        <div className="row" onClick={this.handleRedirection.bind(this,aPerson)}>

The problem is that when I click on an element, even if the redirection works and the Person component's constructor is called, the rendering doesn't work. Here is the Person component definition :

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Person extends React.Component {
    static propTypes = {
        match: PropTypes.object 
    };

    constructor(props){
        super(props);
        console.log('the selected person : ' + this.props.match.params.id);
    }

    render(){
        return(
            <div>A person</div>
        )
    }
}
export default withRouter(Person);

Question : Why the console.log is called but not the rendering ? is there a conflict with the single-spa lib ?

Regards