child route not working in single spa react app

Question

{
  "name": "@mf-demo/react",
  "scripts": {
    "start": "webpack serve",
    "start:standalone": "webpack serve --env standalone",
    "build": "concurrently npm:build:*",
    "build:webpack": "webpack --mode=production",
    "analyze": "webpack --mode=production --env analyze",
    "lint": "eslint src --ext js",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "test": "cross-env BABEL_ENV=test jest",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "prepare": "husky install",
    "coverage": "cross-env BABEL_ENV=test jest --coverage"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.15.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "babel-jest": "^27.0.6",
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-important-stuff": "^3.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "husky": "^7.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.0.6",
    "jest-cli": "^27.0.6",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-config-single-spa-react": "^4.0.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "single-spa-react": "^4.3.1"
  }
}

I have created react app using single spa and in my navigation bar React app I am showing which will take me to route page ('localhost;9000/react'). I need to see how child route will work, I have created child route but if I clicked on childroute my main url isn't working it should show localhost;9000/react/childroute but it was not showing. Below is the code.

root.component.js

import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import TestRoute from './TestRoute';
//import Reactapp from './Reactapp';
import ReactComponent from './ReactComponent';

export default function Root(props) {
  return (
    <Router baseName='/react'>
       <Switch>
          <Route path="/" component={ReactComponent} />  
          <Route path="/childroute" component={TestRoute} />  
       </Switch>
    </Router>
    
  )
}

ReactComponent.js

import React from 'react';
import { Link } from 'react-router-dom';

const ReactComponent = () => {
    return(
        <div>
            ReactComponent
            <Link to='/childroute'>Child Route</Link>
        </div>
    )
}
export default ReactComponent;

TestRoute.js

import React from 'react';

const TestRoute = () => {
    return(
        <div>
            TestPage
        </div>
    )
}
export default TestRoute;

mf-demo-react.js

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";


const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

Drew Reese · Answer 1 · 2022-01-19T16:50:15.613

0

You are incorrectly specifying the router's basename prop. It's basename, not baseName.

export default function Root(props) {
  return (
    <Router basename='/react'>
       <Switch>
          <Route path="/" component={ReactComponent} />  
          <Route path="/childroute" component={TestRoute} />  
       </Switch>
    </Router>
    
  )
}

Within the Switch component path order and specificity matters.

Switch

Renders the first child <Route> or <Redirect> that matches the location.

Order the routes in descending order of specificity. In other words, "/childroute" is more specific than "/" so it should be rendered higher in the Switch. If you had another route, say "/childroute/child" this is even more specific and would come before "/childroute".

<Switch>
  <Route path="/childroute" component={TestRoute} />  
  <Route path="/" component={ReactComponent} />  
</Switch>

Total updated code:

export default function Root(props) {
  return (
    <Router basename='/react'>
      <Switch>
        <Route path="/childroute" component={TestRoute} /> 
        <Route path="/" component={ReactComponent} />  
      </Switch>
    </Router>
    
  )
}

edited Jan 19 '22 at 16:50

answered Jan 19 '22 at 07:05

Drew Reese

165,259
14
153
181

still its not working, i have tried to add exact as well – Akash khanapurkar Jan 19 '22 at 07:23
@Akashkhanapurkar I think you've something else at play then as this works in the codesandbox I just added to my answer. It doesn't appear to use the `basename` of the router, but that shouldn't matter much unless you're deploying your app into a subdirectory on a server. Can you share also your `package.json` file? – Drew Reese Jan 19 '22 at 07:28
updated the package.json. But I am unable to go into page /react/childroute and it was not showing test page which i am rendering in TestRoute file. – Akash khanapurkar Jan 19 '22 at 07:43
@Akashkhanapurkar Try removing the `baseName='/react'` from the router and see if anything improves. – Drew Reese Jan 19 '22 at 07:47
Still not working – Akash khanapurkar Jan 19 '22 at 11:38
@Akashkhanapurkar Then I think there's something else going on with how you are running the app. It works as expected in the linked codesandbox and that `basename="/react"`.... which *actually* just made me realize you've a typo, it's `basename="/react"` not `baseName="/react"`. See updated answer and sandbox code. – Drew Reese Jan 19 '22 at 16:47
Thanks Drew. Yes, I see its working. But this is not normal react app. This is created using single spa application, my navigation app is running on different port and react router is running on different port. I have only included in my single spa Nav app and rest is handled by react-single-spa app. is this not working because this is a single spa app ? – Akash khanapurkar Jan 20 '22 at 11:55
@Akashkhanapurkar Dunno, but I'm inclined to say "yes". Each React app is essentially it's own entity, and each would need their own routers, so any routing/navigation in one won't effect change outside the app. I think you would need to establish a "connection" between the two React apps so they can "communicate" if they need to coordinate on anything, like synchronizing what route/page they should be on. – Drew Reese Jan 20 '22 at 17:35

kurr kurr uma ma · Answer 2 · 2022-01-19T07:42:12.523

Try adding exact to your '/'-route.

<Switch>
     <Route exact path="/">
         <Home />
     </Route>
     <Route path="/about">
         <About />
     </Route>
     <Route path="/dashboard">
         <Dashboard />
    </Route>
</Switch>

A Switch looks through all its children elements and renders the first one whose path matches the current URL. Use a Switch any time you have multiple routes, but you want only one of them to render at a time.

So if you want to wrap it you can place code above in "ReactStuff"-Component.

<Switch>
     <Route exact path="/">
         <Home />
     </Route>
     <Route path="/react">
         <ReactStuff />
    </Route>
</Switch>

I am already into localhost;9000/react path but when i clicked on child route on page it should show me localhost;9000/react/childroute which is not working. — Akash khanapurkar, Jan 19 '22 at 07:13

child route not working in single spa react app

2 Answers2