My routing with React router dom, <Route /> not working

Viewed 841

I'm building a module federation/react aplication. I'm currently working on my container, and i've been setting up the environment for everything, including TS, now, when i try to create my routes, only the Home appear, but other routes don't. Let me show you

This is how my Routing.tsx looks like

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Autenticacion from "./Website/Autenticacion";
import Home from "./Website/Home";

const Routing = () => {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/auth" element={<Autenticacion />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
};

export default Routing;

When i go to "/" the component appears with no problem

enter image description here

But, when i go "/auth"

enter image description here

Nothing appears and, no errors in the console, it's like "/[something]" does not work, i'm pretty sure this might be an stupid error, it's just that, i can't see it.

As i told you, i'm using webpack for module federation, and, i don't know if this problem is related to that configuration.

What is going on ?

UPDATING

This is my package.json

{
  "name": "container",
  "version": "1.0.0",
  "main": "index.tsx",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve --config config/webpack.dev.js"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.2",
    "@mui/styles": "^5.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.4",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "@types/node": "^16.11.10",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.2",
    "@types/webpack": "^5.28.0",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "typescript": "^4.5.2",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "webpack-merge": "^5.8.0"
  }
}

This is my config in webpack, maybe you can spot an error related to this.

webpack.common

module.exports = {
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.m?tsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-react", { runtime: "automatic" }],
              "@babel/preset-env",
              "@babel/preset-typescript",
            ],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};


webpack.dev

const { merge } = require("webpack-merge");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const commonConfig = require("./webpack.common");
const { dependencies } = require("../package.json");

const devConfig = {
  mode: "development",
  devServer: {
    port: 3000,
    historyApiFallback: {
      index: "index.html",
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {},
      shared: dependencies,
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);


Another Update

This is my index.tsx file (I have to do it like this)

import("./bootstap");
export {};

This is my bootstrap file

import { render } from "react-dom";
import { CssBaseline } from "@mui/material";

import Routing from "./Routing";

render(
  <>
    <CssBaseline />
    <Routing />
  </>,
  document.getElementById("root")
);

0 Answers
Related