React components not appearing - javascript

I have a repo at https://bitbucket.org/codyc54321/anthony-project-react
I have the homepage showing links, and when you click the links react-router works. But the text of the component is not showing up, like <div>Login page</div>, <div>Homepage</div>, etc.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import Nav from './Nav';
import Home from './components/Home';
import Login from './components/Login';
import SignupMain from './components/SignupMain';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" component={Nav}>
<IndexRoute component={Home}/>
<Route path='/login' component={Login}/>
<Route path='/signup-main' component={SignupMain}/>
</Route>
</Router>
</Provider>
), document.querySelector('.container'));
Nav.js:
import React from 'react';
import { Link } from 'react-router';
export default class Nav extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header navbar-brand">
Home
</div>
</div>
<div id="navbar" className="navbar-right">
<ul className="nav navbar-nav">
<li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
<li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
<li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
</ul>
</div>
</nav>
</div>
)
}
}
// export Nav as default;
components/Home.js:
import React, { Component } from 'react';
export default class Home extends Component {
render() {
return (
<div>Homepage</div>
);
}
}
Why aren't these components showing up on the page?

Since your other routes are nested inside the route for 'Nav' component, it should render its children somewhere. For that, you have to put this.props.children where you want to render nested components in JSX of Nav component.
export default class Nav extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header navbar-brand">
Home
</div>
</div>
<div id="navbar" className="navbar-right">
<ul className="nav navbar-nav">
<li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
<li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
<li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
</ul>
</div>
</nav>
<div>{this.props.children}</div>
</div>
)
}
}

Related

blank page with <Link>

I get a blank page when I use Link.
I should see Events, date, accueil
I use the last version of react-router.
I don't know if I have to delete to?
This is my code:
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<BrowserRouter>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Thank you!
It seems likely that it is causing an error because Link must be a descendant of the Router (BrowserRouter) component.
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</div>
</BrowserRouter>
);
}

React Router not rendering anything

when using react-router-dom, I cannot render any of my components or anything.
All it does is show a white screen, it doesn't add anything to my index.html template.
There aren't any errors however it says that in index.js there are unused variables that are my components.
Heres my code:
index.js
// Imports
import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { navbar, footer, home } from './components';
ReactDOM.render(
<Router>
<navBar />
<Routes>
<Route path="/" element={<home />} />
</Routes>
<footer />
</Router>,
document.getElementById("root")
);
home.jsx
import React from "react";
function home(){
return(
<div className="home">
<div class="container">
<div class="row allign-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="./img/pizza.jpg" alt=""/>
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">cencored</h1>
<p>cencored</p>
</div>
</div>
</div>
</div>
)
}
export default home;
navBar.jsx
import React from 'react';
import {NavLink} from 'react-router-dom';
function navBar(){
return(
<div className="navBar">
<nav className="navbar navbar-expand navbar-dar bg-dark">
<div className="container">
<NavLink className="navbar-brand" to="/"><img src="../img/logo.png" alt="logo" style="width:500px;height:500px;"/></NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/menu">Menu</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact</NavLink></li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default navBar;
footer.jsx
import React from 'react';
import {NavLink} from 'react-router-dom';
function footer(){
return(
<div className="footer">
<footer class="py-5 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">cencored</p>
</div>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/">Home</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/menu">Menu</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact</NavLink></li>
</ul>
</div>
</footer>
</div>
);
}
export default footer;
index.js (component exports)
export { default as navbar } from './navBar';
export { default as footer } from './footer';
export { default as home } from './home';
Instead of using the element prop on your Route try to component prop like
<Route path="/" component={Home}>
You also must capitalize components.
React components should use PascalCase names.
export { default as Navbar } from './navBar';
export { default as Footer } from './footer';
export { default as Home } from './home';
...
import { Navbar, Footer, Home } from './components';
ReactDOM.render(
<Router>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
<Footer />
</Router>,
document.getElementById("root")
);
You are missing import of Switch from 'react-router-dom' and after you have to wrap your Routes into . And into Routes you have to add all of your components with path not only Home component.
Pseudo code:
import { Switch, Route, Router } from "react-router-dom";
import Home from '.....path'
//import all routing componets
const Routes = () => {
return(
<Switch>
<Route exact path='/' component={Home}>
<Route exact path='/comp1' component={Comp1}>
<Route exact path='/comp2' component={Comp2}>
</Switch>)}
const App = () => {
<Router>
<GlobalNav />
<Container fluid={true}>
<SideNav />
<Routes />
</Container>
</Router>}
Then you can add your navbar anywhere but has to be wrapped into router. I just added as example i can have a typo somewhere but if you follow the concept it should work. And change your components to Pascal naming.

React Router Link from another component wont work

so i had a navbar component that has a <Link></Link> inside of it the problem in i couldn't use that link for the router (it wont refresh) when i clicked on it although the link appears on the URL but it didn't refresh
here's the code
import React, { Component } from 'react'
import {BrowserRouter as Router} from 'react-router-dom'
import Route from 'react-router-dom/Route'
import Nav from './Nav'
export class App extends Component {
render() {
return (
<div className="App">
<Router>
{/* NAVBAR */}
<Nav />
<Route path="/" exact render={
() => <h1>home</h1>
}/>
<Route path="/about" exact render={
() => <h1>about</h1>
}/>
<Route path="/author" exact render={
() => <h1>author</h1>
}/>
</Router>
</div>
)
}
}
export default App
and here's the navbar code
import React, { Component } from 'react'
import styles from './Nav.module.css'
import {BrowserRouter as Router} from 'react-router-dom'
import {Link} from 'react-router-dom'
export class Nav extends Component {
render() {
return (
<Router>
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
</Router>
)
}
}
export default Nav
I'm assuming it's because it's not on the same <Router></Router> but does anyone have a way to make this work?
You're creating a new <Router>, which has no defined <Route> elements within it. Remove that router:
export class Nav extends Component {
render() {
return (
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
)
}
}
Each component doesn't need its own <Router>, as long as they're all contained within (descendants of) the one defined in <App>.

React JS - hide a text of the parent component by clicking on the NavLink

I have this parent Component that simply renders a 'p' of the introduction text and a child component called 'PortfolioMenu'
import React from 'react'
import PortfolioMenu from './PortfolioMenu'
const Portfolio = () => {
return (
<div className="wrapper2">
<p>
Here is an Introduction text
</p>
<PortfolioMenu/>
</div>
)
}
export default Portfolio
Now in the child component 'PortfolioMenu', when I click on some link of NavLink I would like to make the 'p' of the parent component 'Portfolio' disappear. How can I solve it? Thank you
import React from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import Houses from './Houses'
import Interiors from './Interiors'
const PortfolioMenu = () => {
return (
<div>
<Router>
<div class="wrapper2">
<div className="wrapper-portfolio">
<Route exact path='/portfolio/houses' render={() => <Houses />} />
<Route exact path='/portfolio/interiors' render={() =><Interiors/>}
/>
</div>
<nav>
<ul className="portfolio-menu">
<li><NavLink activeClassName="active" exact
to="/portfolio/houses">Houses</NavLink></li>
<li><NavLink activeClassName="active" exact
to="/portfolio/interiors">interiors</NavLink></li>
</ul>
</nav>
</div>
</Router>
</div>
)
}
export default PortfolioMenu
Here you go with a solution
import React from 'react'
import PortfolioMenu from './PortfolioMenu'
const Portfolio = () => {
constructor(props) {
super(props){
this.state = {
visibleP: true
};
}
this.handleMenuClick = this.handleMenuClick.bind(this);
}
handleMenuClick() {
this.setState({
visibleP: false
});
}
return (
<div className="wrapper2">
{
this.visibleP &&
<p>
Here is an Introduction text
</p>
}
<PortfolioMenu onHandleMenuClick={this.handleMenuClick}/>
</div>
)
}
import React from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import Houses from './Houses'
import Interiors from './Interiors'
const PortfolioMenu = () => {
return (
<div>
<Router>
<div class="wrapper2">
<div className="wrapper-portfolio">
<Route exact path='/portfolio/houses' render={() => <Houses />} />
<Route exact path='/portfolio/interiors' render={() =><Interiors/>}
/>
</div>
<nav>
<ul className="portfolio-menu">
<li>
<NavLink
activeClassName="active"
exact
to="/portfolio/casas"
onClick={this.props.onHandleMenuClick()}
>
casas
</NavLink>
</li>
<li>
<NavLink
activeClassName="active"
exact
to="/portfolio/interiores"
onClick={this.props.onHandleMenuClick()}
>
interiores
</NavLink>
</li>
</ul>
</nav>
</div>
</Router>
</div>
)
}
PortfolioMenu.propTypes = {
onHandleMenuClick: PropTypes.func
};
export default PortfolioMenu;
You can't have a dump component. Here you need to pass props from child component to parent component.

React Capital case in routes

I'm working on a very simple react app, but when I try to use router in always makes pathname with first letter Capital case and I don't have any idea why.
app.js
import React from "react";
import ReactDOM from "react-dom";
import Layout from "./pages/Layout"
import Basket from "./pages/Basket"
import { Router, Route, IndexRoute, hashHistory } from "react-router"
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={ItemsList}></IndexRoute>
<Route path="basket" name="basket" component={Basket}></Route>
</Route>
</Router>,
app);
Header.js
import React from "react";
import { Link } from "react-router"
export default class Header extends React.Component {
render() {
const { location } = this.props;
const basketClass = location.pathname.match(/^\/basket/) ? "active" : "";
return (
<header>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class={inventoryListClass}><Link to="/">Inventory</Link></li>
<li class={basketClass}><Link to="basket">Basket</Link></li>
</ul>
</div>
</nav>
</header>
);
}
}
does anyone now why it uses capital letter "/Basket" when I explicitly specified "basket" in route parameter.
thanks.
Layout.js
import React from "react";
import Footer from "./Footer";
import Header from "./Header";
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div>
<Header location={location} />
<div class="container">
{this.props.children}
</div>
<Footer />
</div>
);
}
}
Ok so I found the problem. I put capital capital "B" in <link to=Basketthis line in my header.js
<li class={basketClass}><Link to="Basket">Basket</Link></li>
So it was just a type. Sorry guys.
You don't have to check for active routes, by the way, there is activeClassName="active" which does the same.

Categories