Im having trouble with react-router-dom working in production. While my app header and footer are rendered just fine, the router does not work and I can see the following comments where my routes should appear upon inspecting the html in Chrome devtools. I am getting no console errors.
<div>
<!-- react-empty: 15 -->
<!-- react-empty: 16 -->
<!-- react-empty: 17 -->
<!-- react-empty: 18 -->
</div>
This is my App.js component file:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/Footer';
import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';
const AppWrapper = styled.div`
font-family: 'Open Sans', sans-serif;
width: 100%;
max-width: calc(768px + 16px * 2);
margin: 0 auto;
display: flex;
height: 100%;
flex-direction: column;
`;
class App extends Component {
...
render() {
return (
<Router>
<AppWrapper>
<Header/>
<div>
<Route exact path='/' render={({history}) =>
<Home infoHandler={this.handleUserInfo}
imageHandler={this.handleImage}
history={history}/>
}/>
<Route exact path='/select' render={({history}) =>
<Select info={this.state.userInfo}
image={this.state.userImage}
selectionHandler={this.handleSelectedImage}
history={history}/>
}/>
<Route exact path='/process' render={({history}) =>
<Process image={this.state.selectedImage} user={this.state.userInfo}/>
}/>
<Route exact path='privacy' component={Privacy}/>
</div>
<Footer/>
</AppWrapper>
</Router>
)
}
}
export default App;
This is my index.js file:
import React from 'react';
import {render} from 'react-dom';
import App from 'containers/App';
render(<App />, document.getElementById('app'));
The router works like a charm in dev mode. Using Webpack for building.
** Home Component:
import React, {Component} from 'react';
import FacebookLogin from 'components/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';
import styled from 'styled-components';
import palette from 'palette';
const Img = styled.img`
max-width: 100%;
`;
const H3 = styled.h3`
color: ${palette.black};
`;
class Home extends Component {
render() {
return(
<Row center='xs'>
<Col xs={12}>
<Img src="https://res.cloudinary.com/julsgc/image/upload/v1491106020/Boletia_995x380__2_fqawa8.png"/>
</Col>
<Col xs={12}>
<h3> A que Ser Extraordinario te pareces!? </h3>
</Col>
<Col xs={12}>
<p> Averigualo ahora! </p>
</Col>
<Col>
<FacebookLogin
infoCallback={this.props.infoHandler}
imageCallback={(data) => {
this.props.imageHandler(data);
this.props.history.push('/select');
}}/>
</Col>
</Row>
);
}
}
Home.propTypes = {
history: React.PropTypes.object
}
export default Home;
* Update *
App is now working after switching to hash router. Any further comments appreciated since BrowserRouter is the recommended approach according to the docs.
use below code in httacces file
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
if your app not in root folder then use
<BrowserRouter basename="/the-app">
**also more review check link
https://www.andreasreiterer.at/fix-browserrouter-on-apache/
Please take a look on this Thread
If u are using Webpack, then just add -
devServer{
historyApiFallback: true
}
And for gulp use the following:
historyApiFallback = require('connect-history-api-fallback')
//start a local dev server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
middleware: [ historyApiFallback() ]
});
});
Related
App.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
import Header from "./Header";
function App() {
return (
<div className="app">
<Router>
<Switch>
<Route path="/checkout">
<h1>Checkout</h1>
</Route>
<Route path="/login">
<h1>Login page</h1>
</Route>
<Route path="/">
<Header/>
<Home/>
<h1>Home page</h1>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Header.js
import React from "react";
import "./Header.css";
import SearchIcon from "#material-ui/icons/Search";
import ShoppingBasketIcon from "#material-ui/icons/ShoppingBasket";
import { Link } from 'react-router-dom';
function Header() {
return (
<div className="header">
<img className="header__logo" src="https://i.pinimg.com/736x/35/ca/74/35ca74aa0f5cbb599b83c02bf48499b5--design-logo-handicraft.jpg"/>
<div className="header__optionBasket">
<ShoppingBasketIcon />
<span className="header__optionLineTwo header__basketCount">
0
</span>
</div>
</div>
</div>
);
}
export default Header;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
I tried to add Header and Home component in App.js and was expecting the stuffs which I added, but it is showing blank on the home page. In contrast, login page shows texts -"login". Where did I go wrong, I have been searching the same but cannot find any answer anywhere. My react router version is 5.2.0
I'm not that familiar with react-router, but It seems you are returning 3 components under 1 Route tag
So maybe put Header, Home and h1 in a div:
<Route>
<div>
<Header />
<Home />
<h1></h1>
</div>
</Route>
I have an app that successfully routes the url, but for some reason the pages aren't displaying under the header. I've looked at the other questions and available resources, but I'm very stuck in figuring out what I'm doing wrong. I am using react-router-dom 6.3.0
Here are my files for reference:
Index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Router>
<App />
</Router>
);
App.js:
import "./App.css";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";
function App() {
return (
<div className='app'>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="freshman" element={<Freshman />} />
<Route path="sophomore" element={<Sophomore />} />
<Route path="junior" element={<Junior />} />
<Route path="senior" element={<Senior />} />
</Routes>
</div>
);
}
export default App;
Header.js:
import React from "react";
import { Link } from "react-router-dom";
import "./Header.css";
function Header() {
return (
<div className="header-container">
<Link to="/" className="header-title">
College
</Link>
<nav>
<Link to="freshman" className="nav-item">
Freshman
</Link>
<Link to="sophomore" className="nav-item">
Sophomore
</Link>
<Link to="junior" className="nav-item">
Junior
</Link>
<Link to="senior" className="nav-item">
Senior
</Link>
</nav>
</div>
);
}
export default Header;
Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
</div>
);
}
export default Home;
All of the pages are just an tag with their title in black font. However, like I said, none of the pages are displaying even though the url is correctly routed. Any help would be much appreciated!
Your code seems right!
May be try adding a " / " before every routes.
Reply if you're seeing white screen in preview...
You need an <Outlet /> element to render the routes. Based on your code, it looks like this should be in the return statement of Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
<Outlet />
</div>
);
}
export default Home;
This will render the freshman, softmore, junior, senior components as subcomponents of Home, depending on which route is selected.
You can read the documentation for <Outlet /> here: https://reactrouter.com/docs/en/v6/components/outlet
I have a navigation bar on the home page with background-color: white; On moving to another page. I want it to turn black.
My Navigation Styles file:
import styled from 'styled-components'
export const Nav = styled.nav`
background-color: #fff;
`
My Navigation file where I am importing the styles:
import { Link } from 'react-router-dom'
import Nav from './NavStyles'
const NavBar = () => {
return(
<Nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/shop">Shop</Link>
</li>
<li>
<Link to="/cart">Cart</Link>
</li>
</ul>
</Nav>
)
}
export default NavBar
My ShopStyles file (where changing the background-color):
import styled from 'styled-components'
import { Nav } from '../Nav/NavStyles'
const ShopNav = styled(Nav)`
background-color: #323232;
`;
export default ShopNav
My Shop file:
import ShopNav from './ShopStyles'
import { Nav } from '../Nav/NavStyles'
const Shop = () => {
return(
<div>
<Nav>
<ShopNav></ShopNav>
</Nav>
<h1>Over here my shop design will come</h1>
</div>
)
}
export default Shop
App.js:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './components/Home/Home'
import NavBar from './components/Nav/Nav'
import Shop from './components/Shop/Shop'
const App = () => {
return (
<Router>
<NavBar />
<Switch>
<Route exact path="/"> <Home /> </Route>
<Route exact path='/shop'> <Shop /> </Route>
</Switch>
</Router>
);
}
export default App;
How do I get the color black with my navigation bar?
I don't understand about your worry.
The code which you've written is correct and I have also tested your code.
I recommend that you will check your code again.
I have no experience with react, and I'm trying to teach myself by doing/building. I would like to add a sidebar to a page on my site. However, all my research has lead to articles and tutorials that adds the sidebar to the homepage. I don't want it on the homepage, just one page. The look and feel i'm going for is Strip API documentation page:
If i could just get the sidebar on the page, then I can try to style it up the way I like. Below are my files.
component Sidebar.js
import React, { Component } from "react";
import '../Styles/sidebar.css'
class Sidebar extends Component {
render() {
return(
<div className="sidebar">
<h1> I'm the sidebar</h1>
</div>
);
}
}
export default Sidebar;
The page I want to put the sidebar on "Developer.js":
import React from 'react';
import Sidebar from './components/Sidebar'
import './Styles/sidebar.css'
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
export default Developers;
My take at sidebar.css:
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';
class App extends Component {
render() {
return (
<React.Fragment>
<NavigationBar />
<Layout>
<Router>
<Switch>
<Route exact path = "/" component={Home} />
<Route path="/developers" component = {Developers} />
<Route component={NoMatch} />
</Switch>
</Router>
</Layout>
</React.Fragment>
);
}
}
export default App;
With the added css file, I'm the sidebar just shows up right above Documentation
It's not in the "sidebar", what am i missing?
Yes, to start with your components are configured incorrectly. It's very easy to fix it. Let's start with the sidebar.js.
//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
render() {
return (
<div className="sidebar-container">
<div className="sidebar">
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
</div>
</div>
);
}
}
//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";
class Developer extends Component {
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Developer Page</h1>
</div>
);
}
}
export default Developer;
And also, in your App.js file, you are importing as named components. That is the reason why you are not getting the desired output. If you're importing named components you will have to export them the same way too. Currently, you are exporting as them as default, so you don't need the curly braces while importing them.
//App.js
import Home from './Home';
import Developers from './Developer';
import NoMatch from './NoMatch';
Update: Import this file inside your sidebar.js like import ./style.css. I have updated the code for sidebar.js file. Please do check.
//style.css
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
display: flex;
flex-direction: column;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
First of all, your Sidebar component can be simplified to a functional component:
// Sidebar.js
import React from "react";
export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;
Secondly, in you Developers page, you can remove the Sidebar component because you already have it and you are importing it correctly. Next, add it to your Developers component:
// Developers.js
import React from "react";
import { Sidebar } from "./components/Sidebar";
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
);
This assumes you have the following folder structure to ensure your imports work correctly:
src/
app.js
Developers.js
components/
Sidebar.js
I'm learning reactjs and I'm trying to appear a search bar in Home section and to disappear it in the Shop section (or other sections).
To better understand, I leave you a reference image: The final result must be like this
This is the code of my component:
import React, {Component} from 'react';
import {Nav, Button, Navbar, Form, FormControl} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import {AuthButton} from '../App';
import logo from '../img/logo.png'
class Header extends Component{
render(){
return(
<>
<Navbar>
<div>
<img src={logo} className='main-logo'/>
</div>
<Form className='form'>
<Button className='btn-search'/>
<FormControl type="text" placeholder="Search..." className='barra'/>
</Form>
<Nav className="ml-auto">
<NavLink className= 'nav-link' to='/'>Home</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>About</Nav.Link>
<hr className='hr-header'/>
<NavLink className= 'nav-link' to='/Shop'>Shop</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>Help</Nav.Link>
</Nav>
<NavLink to='/Shopping'>
<Button className='btn-cart' variant="secondary">
Your Cart
</Button>
</NavLink>
<AuthButton/>
</Navbar>
</>
)
}
}
export default Header;
And this is how I've imported my component into the Router
import React from 'react';
import './styles/App.css';
import Shop from './container/shop';
import Shopping from './container/shopping';
import Shipping from './container/shipping';
import Payment from './container/payment';
import home from './container/home';
import Product from './container/Product';
import iPhone from './container/iPhone';
import iPad from './container/iPad';
import SignInForm from './components/SignInForm';
import {BrowserRouter as Router, Route, withRouter, Redirect, Switch} from 'react-router-dom';
import {Button, ButtonToolbar, OverlayTrigger, Popover} from 'react-bootstrap';
function App(){
return (
<Router>
<Route>
<Switch>
<Route exact path='/' component={home}/>
<Route path='/Shop' component={Shop}/>
<Route path='/Product' component={Product}/>
<Route path='/iPhone' component={iPhone}/>
<Route path='/iPad' component={iPad}/>
<PrivateRoute path='/Shopping' component={Shopping}/>
<Route path='/Shipping' component={Shipping}/>
<Route path='/Payment' component={Payment}/>
<Route path='/SignInForm' component={SignInForm}/>
<Route path='*' component={() => <div
style = {{
textAlign: 'center',
paddingTop: 250,
fontSize: 30
}}>
<strong>404 NOT FOUND</strong>
</div>}/>
</Switch>
</Route>
</Router>
);
}
export default App;
I've also other files .js for the continers of my sections
Thank you all!
If you create separate components for Nav and Search, life becomes much easier. Place your Search component inside your Nav component, then render Search only at certain addresses (i.e. anything other than /Shop).
import React from "react";
import { withRouter } from "react-router-dom";
import Nav from "/.Nav";
function SearchComponent() {
return <div>My search bar</div>;
}
function MyComponent(props) {
const path = props.location.pathname;
return (
<div>
<Nav>{path !== "/Shop" && <SearchComponent />}</Nav>
</div>
);
}
export default withRouter(MyComponent);
This technique exposes location through withRouter to get the current path (/pageName). Then, it uses conditional rendering to hide the Search if the location is "/Shop."