Permalänk

React Route Dom på egen domän

Hej

Jag har publicerat en Create-React-App på en egen server med domänen: mina-projekt.se adressen är FredriksUtveckling

Koden för index.js är:

import React from 'react'; import ReactDOM from 'react-dom'; import MainApp from './MainApp'; import './Components/Style/MainStyle.js'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( //<React.StrictMode basename={process.env.PUBLIC_URL}> <MainApp />, //</React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

Koden för App.js:

/* ================================================== MainApp ================================================== Imports module */ import React, { useState, useEffect } from 'react'; import {Helmet} from "react-helmet"; // React Router - ES6 modules import { BrowserRouter as Router, Route, Redirect, Link } from "react-router-dom"; // Style import { MainStyle, MainContentStyle, FooterStyle } from './Components/Style/MainStyle'; import { specificBtnStyle } from'./Components/Style/NavBarStyle'; // Generall components import { Development } from'./Components/Structure/Development'; import FooterContent from'./Components/Structure/FooterContent'; import { MyProjects } from'./Components/Structure/MyProjects'; import { navRouteName } from'./Components/Data/NavRouteName'; import { AbouteMe } from'./Components/Structure/AbouteMe'; import { gotoPage$ } from'./Components/Data/Storage'; import { runAppUrl } from'./Components/Data/AppUrl'; import { MainPage } from'./MainPage'; import { HeaderContent } from'./Components/Structure/HeaderContent'; import { from } from 'rxjs'; const MainApp = () => { const [ appName, updateAppName ] = useState(''); const [ pageRoute, setPageRoute ] = useState(''); useEffect(() => { updateAppName('Fredrik Webbpage'); gotoPage$.subscribe((gotoPage) => { console.log("MainApp -> gotoPage", gotoPage) setPageRoute( gotoPage); }); //if (runAppUrl() === '/Welcome') window.location.pathname = "Welcome"; },[ appName, pageRoute ]); console.log("MainApp -> runAppUrl()", runAppUrl()) console.log("MainApp -> pageRoute", pageRoute.page) return ( <MainStyle.body> <Helmet> <meta charSet="utf-8" /> <title>{`${appName}`}</title> </Helmet> <Router> {pageRoute === navRouteName.headLine0.id && <Redirect to={ `/${navRouteName.headLine0.route}`}/>} <Route exact path={`/${navRouteName.headLine0.route}`} component={ MainPage } /> {pageRoute === navRouteName.headLine1.id && <Redirect to={ `/${navRouteName.headLine1.route}`}/>} <Route exact path={`/${navRouteName.headLine1.route}`} component={ Development } /> {pageRoute === navRouteName.headLine2.id && <Redirect to={ `/${navRouteName.headLine2.route}`}/>} <Route exact path={`/${navRouteName.headLine2.route}`} component={ MyProjects } /> {pageRoute === navRouteName.lastHeadLine.id && <Redirect to={ `/${navRouteName.lastHeadLine.route}`}/>} <Route exact path={`/${navRouteName.lastHeadLine.route}`} component={ AbouteMe } /> <FooterStyle.footerContainer> <FooterContent/> </FooterStyle.footerContainer> </Router> </MainStyle.body> ); } export default MainApp;

Sidfoten laddas men inte mina komponenter för "Route"!

Felet har jag stött på innan men minnet sviker

Har för mig att det har göra något med BrowserRouter, HashRouter eller liknande?

Mvh Fredrik

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Permalänk
Medlem

@freddehboy:
Nu var det över ett år sedan jag satt med React, så du får ta det med en nypa salt.
Men ska inte Router vara wrappad i en <Switch>. Den ansvarar väl för att kolla igenom alla routes och returera första korrekt match?
Sen ska väl Footern ligga utanför själva routern, då den ligger "statisk" på alla sidor? Som du gjort med Helmet.

Edit: Du får undefined på flera pageRoutes om du kikar i Console. Det kanske du kan gräva vidare i

Permalänk
Skrivet av zaibuf:

@freddehboy:
Nu var det över ett år sedan jag satt med React, så du får ta det med en nypa salt.
Men ska inte Router vara wrappad i en <Switch>. Den ansvarar väl för att kolla igenom alla routes och returera första korrekt match?
Sen ska väl Footern ligga utanför själva routern, då den ligger "statisk" på alla sidor? Som du gjort med Helmet.

Edit: Du får undefined på flera pageRoutes om du kikar i Console. Det kanske du kan gräva vidare i
https://i.imgur.com/9ynFZgU.png

Ska titta

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Permalänk

Jag löste problemet

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch