import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Discussion from './discussion.js';
import Rules from './rules.js';
import Workflow from './workflow.js';
export default function() {
return (
<div>
hello
<Switch>
<Route exact path="/" component={Discussion} />
<Route exact path="/rules" component={Rules} />
<Route exact path="/workflow" component={Workflow} />
</Switch>
</div>
)
}
I'm importing the function called 'PageContent' from './page-content'
calling it with in app.js
Then the page goes blank
Related
Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:
App.js
//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={Home} />
<Route path="/Pending" element={Pending} />
</Routes>
</BrowserRouter>
);
}
Home.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';
function Home(){
return(
<div>
<div>
<NavBar/>
</div>
<h1>HI</h1>
</div>
);
}
export default Home;
Issue
The Route component API changed in react-router-dom#6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.
Solution
Render the routed components as JSX, i.e. <Home /> instead of Home.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Pending" element={<Pending />} />
</Routes>
</BrowserRouter>
);
}
You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.
In your App.js file, you have to make the following changes in order to work:
import { Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<Routes>
<Route index path="/" element={<Home />}/>
<Route path="pending" element={<Pending />} />
</Routes>
);
}
For more info, please visit the official documentation here!
import './App.css';
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';
import Home from './Components/Home';
import About from './Components/About';
function App() {
return (
<>
<Router>
<Header/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/About" element={ <About/> } />
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
I'm working on my portfolio. I'm trying to put all components (Home, Skills, Projects, Contact) on one page, so I'm not planning to set routes for those component. However I want to set a route for project detail component, which I'll put a link on Projects component. I also want to set a route for 404 page.
I wrote the following code but it doesn't know ProjectDetail page when I access http://localhost:3000/projects. Can you give me advice how I can fix the problem?
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={<ProjectDetail />} />
<Route path='*' element={<Error />} />
</Routes>
</Router>
</>
);
};
export default App;
I think you need to wrap all the components that u want in one page and put it on a route like this: <Route path="/" element={<OnePageApp/>}/>
After this i don't see any other errors.
Good Luck, I hope i have been able to help you
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={ProjectDetail} />
<Route path='*' element={Error} />
</Routes>
</Router>
</>
);
};
export default App;
I am new to React and practicing with an online website for repairing appliances. I have used react-router and created all my routes in a separate file.
I have a problem though, I can open any link from the address bar like:
http://localhost:3000/<randomword>
I only want routes to be opened that I have declared in my routes component while if I type http://localhost:3000/something, I get an empty page with my header and footer in it.
here are my codes:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
import './index.css';
const App = () => {
return(
<BrowserRouter>
<Routes />
</BrowserRouter>
)
}
ReactDOM.render(<App/>,document.getElementById('root'));
App.js:
import React, {Component} from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import Layout from './Containers/Layout';
import LandingPage from './Containers/Pages/LandingPage';
import About from './Containers/Pages/About';
import Cities from './Containers/Pages/Cities';
import Discount from './Containers/Pages/Discount';
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</BrowserRouter>
</Layout>
</div>
);
}
};
export default Routes;
Layout.js:
import React, { Component } from 'react';
import Header from "./Layouts/Header";
import Footer from './Layouts/Footer';
import './Layout.css';
export default class Layout extends Component {
constructor(){
super();
this.state= {
}
}
render() {
return (
<div className="page-container">
<Header/>
<div className="content-wrap">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
Can someone help me figure out how I should stop random random pages to be opened from addressbar?
Just want to start by saying I'm completely self-taught with React so I apologize if this answer is incorrect. However, in my experience with react-router I always have a Switch inside of my BrowserRouter. So your Routes class in app.js should something like this:
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Switch>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</Switch>
</BrowserRouter>
</Layout>
</div>
);
}
};
Just be sure you don't forget to update your imports to
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import { Redirect } from "react-router-dom"
<Route path="/not-found" component={notFound-Component} />
<Redirect to="/not-found" />
This will always redirect you to 404 component if route is not present just make a 404 component and u should add the redirect at the end after all routes are defined
I am building an E-Commerce MERN Stack Web Application. The loading time of my Home Page as tested by Lighthouse is more than 12s.
I have hence posted the App.js file and my main main homepage.js file.
How can I implement code splitting on my homepage.js file (using Lazy-Suspense method o any other)?
homepage.js
import React, { Component } from 'react';
import Header from '../header/header';
import About from '../about/about';
import Services from '../services/services';
import Footer from '../footer/footer';
import Navbar from '../navbar/navbar';
export default class Homepage extends Component {
state = {
response: '',
email: '****.com',
password:'****',
message:'',
};
render() {
let loggedIn = this.props.loggedIn;
console.log(loggedIn)
return (
<div className="App">
<Navbar />
<Header resumeData={{name:this.state.email,}}/>
<Services resumeData={{name:this.state.email,}}/>
<About resumeData={{name:this.state.email,}}/>
<Footer resumeData={{name:this.state.email,}}/>
</div>
);
}
}
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Homepage from './components/homepage/homepage';
import LogIn from './components/login/login';
import SignUp from './components/signup/signup';
import Reset from './components/reset/reset';
import Account from './components/account/account';
import Verify from './components/verify/verify';
import Shop from './components/shop/shop';
import Cart from './components/cart/cart';
import Checkout from './components/cart/checkout';
import Admin from './components/admin/admin';
import Order from './components/order/order';
import Subscription from './components/order/subscription';
import Subscribe from './components/subscribe/subscribe';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={Homepage} exact/>
<Route path="/shop" component={Shop} />
<Route path="/cart" component={Cart} />
<Route path="/checkout:what" component={Checkout} />
<Route path="/subscribe" component={Subscribe} />
<Route path="/order:oId" component={Order} />
<Route path="/subscription:sId" component={Subscription} />
<Route path="/login" component={LogIn}/>
<Route path="/admin" component={Admin}/>
<Route path="/signup" component={SignUp}/>
<Route path="/reset" component={Reset}/>
<Route path="/account" component={Account}/>
<Route path="/verify/:token" component={Verify}/>
</Switch>
</BrowserRouter>
);
}
}
export default App;
this how you code split your react js app:
import React,{lazy,Suspense} from 'react'
const Child = lazy(()=>import('./ChildComponent'))
const Parent = ()=> <Suspense fallback={<Loader/>}><Child/></Suspense>
here is full detailed explanation : React Code splitting
I used BrowserRouter with his basename, my server is WINSCP, the routes works correctly but, when I refresh it or writing it manually, I get :
My App.js is :
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from "react-router-dom";
import { BackTop } from 'antd';
import Header from './components/Header/Header';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
import CreerActivite from './components/CreerActivite/CreerActivite';
import TypesRDV from './components/TypesRDV/TypesRDV';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/ReactCalendar">
<Header/>
<Switch>
<Route exact path="/" component={Planning} />
<Route exact path="/creerActivite" component={CreerActivite} />
<Route exact path="/typesRDV" component={TypesRDV} />
</Switch>
</BrowserRouter>
<BackTop />
</div>
);
}
}
export default App;
On my package.json, I have "homepage": "https://dev/ReactCalendar" and my folder on WINSCP is /dev/ReactCalendar/
How can I fix it ?
The reason why this is happening is your server does not know what to serve when you hit that URL. There are multiple approaches to solving your problem. I'll suggest the easiest approach here.
Replace BrowserRouter with HashRouter.
class App extends Component {
render() {
return (
<div>
<HashRouter basename="/ReactCalendar">
<Header/>
<Switch>
<Route exact path="/" component={Planning} />
<Route exact path="/creerActivite" component={CreerActivite} />
<Route exact path="/typesRDV" component={TypesRDV} />
</Switch>
</HashRouter>
<BackTop />
</div>
);
}
}
And obviously, don't forget to import HashRouter from 'react-router-dom'.
You can view other approaches here:
React-router urls don't work when refreshing or writing manually