I am trying to build a locked page to display a message when users visit the web app from mobile and load a mobile page layout when a message like this mobile is not supported . I was thinking on using document.addEventListener('DOMContentLoaded', () => { , but not sure . if it's the best , but however where can I load this validation? the logic pseudo will be something to the following
if (tooSmall || isMobile) {
ReactDOM.render(<MobileLockout />);
} else {
ReactDOM.render(<Root/>);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
app.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
You add can a Wrapper (HoC) to your App (in index.js)
ReactDOM.render(
<React.StrictMode>
<MobileWrapper>
<App />
<MobileWrapper>
</React.StrictMode>,
document.getElementById('root')
);
The MobileWrapper should handle which to show the children props or "MobileLockout" component
function MobileWrapper({ children }}) {
const isMobile = ..
if (isMobile) return <MobileLocout />
return children
}
If check in App.js it is work
import logo from './logo.svg';
import './App.css';
function App() {
if (tooSmall || isMobile) {
return (
<MobileLocout />
)
} else {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Related
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 want routing facility in my App so I have use react-router-dom for it. I have a checkout button which on clicking should redirect to <Checkout/> page but only the url is changing & not directing to the checkout page until unless user refreshes manually.
Here's my code:
App.js
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Checkout from "./Checkout";
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/checkout">
<Header />
<Checkout />
</Route>
<Route path="/">
<Header />
<Home />
</Route>
</Switch>
</div>
</Router>
// header
// home
);
}
export default App;
Checkout Button (Header.js):
import React from "react";
import "./Header.css";
import { GrSearch } from "react-icons/gr";
import { MdShoppingBasket } from "react-icons/md";
import { Link, useHistory} from "react-router-dom";
import { useStateValue } from "./StateProvider";
const Header = () => {
const [{ basket }, dispatch] = useStateValue();
const history = useHistory();
return (
<div className="header">
<Link to="/">
<img
className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt=""
></img>
</Link>
<div className="header__search">
<input className="header__searchInput" type="text"></input>
<GrSearch className="header__searchIcon" />
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Hello Guest </span>
<span className="header__optionLineTwo">Sign In</span>
</div>
<div className="header__option">
<span className="header__optionLineOne">Returns </span>
<span className="header__optionLineTwo">& Orders</span>
</div>
<div className="header__option">
<span className="header__optionLineOne">Your </span>
<span className="header__optionLineTwo">Prime</span>
</div>
<Link to="/checkout">
<div className="header__optionBasket">
<MdShoppingBasket onClick={ ()=> history.push("/checkout")}/>
<span className="header__optionLineTwo header__basketCount">
{basket?.length}
</span>
</div>
</Link>
</div>
</div>
);
};
export default Header;
May anyone tell me why it's not redirecting to checkout page. I am using React-router-dom v5.2.0
Thanks
I have this simple code below and I got this error when building, but its not clear for me what the order of my imports should be.
import * as React from 'react';
import './App.css';
import logo from './logo.svg';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
public render() {
return (
<div className="App">
<DefaultButton
text='See Button'
primary={ true }
href='#/components/button'
/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Set these in your tslint.json:
"rules": {
"ordered-imports": [false],
"object-literal-sort-keys": [false]
}
How can I avoid this error in ESLint? Should I write this code in a different way? I can't change ESLint config and I should have 0 errors...
import React from 'react';
import logo from './logo.svg';
import './style.css';
import SearchBar from '../SearchBar';
import GithubDataTable from '../GithubDataTable';
const App = props => (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">The Task</h1>
</header>
<div>
<SearchBar />
<GithubDataTable />
</div>
</div>
);
export default App;
You don't need props at all.
You can just write it like a function without params:
import React from 'react';
import logo from './logo.svg';
import './style.css';
import SearchBar from '../SearchBar';
import GithubDataTable from '../GithubDataTable';
const App = () => (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">The Task</h1>
</header>
<div>
<SearchBar />
<GithubDataTable />
</div>
</div>
);
export default App;
I've got a problem with Link in react router in one component. Once I try to use Link, the console shows this error: Failed context type: The context router is marked as required in Link, but its value is undefined. I've seen all similar threads about this problem here, but there's no solution to this exact issue. I'm using all the latest versions of all frameworks and componets (just downloaded everything a couple of days ago), so it's definitely not about upgrading anything.
The structure is like this:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import About from './components/About';
import Posting from './components/Posting';
import Groups from './components/Groups';
ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import SideMenuUserInfo from './components/sidemenu/SideMenuUserInfo';
import SideMenu from './components/sidemenu/SideMenu';
import SideMenuFooter from "./components/sidemenu/SideMenuFooter";
import TopNav from "./components/topnav/TopNav";
class App extends Component {
render() {
return(
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
);
}
}
export default App;
SideMenuUnfoldLink.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class SideMenuUnfoldLink extends Component {
render() {
return(
<li>
<a>
<i className={this.props.faClass}></i>{this.props.text}<span className="fa fa-chevron-down"></span>
</a>
<ul className="nav child_menu">
<li><Link to="/">Home</Link></li> <<<<-- THE PROBLEM IS HERE
</ul>
</li>
);
};
}
export default SideMenuUnfoldLink;
And About.js (as a working example of Link)
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class About extends Component {
render() {
return (
<div>
<h2>Это About</h2>
<ul>
<li><Link to="/groups">Groups</Link></li>
<li><Link to="/">Main</Link></li>
</ul>
</div>
);
}
}
export default About;
The Link works with the About component like a charm. The error starts to pop up once I use Link in my SideMenuUnfoldLink component.
I suppose the Router is just not initialized by the moment SideMenuUnfoldLink wants to use Link. But how can I go about it?
I've just found the solution. It is to wrap the router around the entire
application to make it available to all components like this:
render() {
return(
<Router>
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
</Router>
);
}
And of course removing this part:
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
Here's a more detailed explanation https://reacttraining.com/react-router/
Lots of thanks to the author of that video :)