Collapsing Menu Bar
My navbar is up, woot! At first my hamburger menu wasn't quite showing up until I realized that its bc of how we sized things on flex
and width
within the .menu-content-container
🤦🏻♀️
CSS Grids & Data
Where the struggle begins: my lack of familiarity w/ React Router. My "Trending Posts" do not show up on Home
in place of my 404
.
page-rend.js
import React from "react";
import { useRouteMatch } from "react-router-dom";
const generatePage = (page) => {
const component = () => require(`./pages/${page}`).default;
try {
return React.createElement(component());
} catch (err) {
console.warn(err);
return React.createElement(() => 404);
}
};
export default function PageRenderer() {
const {
params: { page },
} = useRouteMatch();
return generatePage();
}
home.js
import React from "react";
import { PostMasonry } from "../components/common";
import trending from "../assets/mocks/trending";
const trendingConfig = {
1: {
gridArea: "1 / 2 / 3 / 3",
},
};
export default function Home() {
return (
<section className="container home">
<div className="row">
<h2>Trending Posts</h2>
<PostMasonry posts={trending} columns={3} />
</div>
</section>
);
}
app.js
import React from "react";
import Navigation from "./components/nav";
import "./assets/scss/base.scss";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
import PageRenderer from "./page-rend";
function App() {
const user = {
firstName: "Thit",
lastName: "Nguyen",
};
return (
<Router>
<div className="App">
<Navigation user={user} />
<Switch>
<Route path="/:page" component={PageRenderer} />
<Route path="/" render={() => <Redirect to="/home" />} />
<Route component={() => 404} />
</Switch>
</div>
</Router>
);
}
export default App;
Possible Resolutions/Pace Is the Trick
I've got a hunch that it has something to do with how the <Router>
and <Switch>
component categories are set up because, everything else seems to check out.
So for now, I'm going to dive into the documentation and search for sources to get a better understanding of how all of this processes before going any further.
So far, learning React these past few days has taught me:
- Patience
- Punctuation
- Literalness
- Humility
Top comments (0)