I am trying to develop a Desktop app using Electron + React. I am using electron-react-boilerplate.
I have defined my route in the routes.js and referred to the component and yet in development it fails to render the page when I click on it.
routes.js
import React from 'react';
import { HashRouter as Router } from 'react-router-dom';
import { Switch, Route } from 'react-router';
import App from './containers/App';
import HomePage from './containers/HomePage';
import PersonFind from './containers/PersonFind';
export default () => (
<Router>
<App>
<Switch>
<Route path="/" component={HomePage} />
<Route path="/identify" component={PersonFind} />
</Switch>
</App>
</Router>
);
PersonFind.js
import React, { Component } from 'react';
import Header from '../components/Header';
class PersonFind extends Component {
render() {
return (
<div>
<Header />
<h1> Works </h1>
</div>
);
}
}
export default PersonFind;
Use exact in your index route.
<Route exact path="/" component={HomePage} />
/identify match with both / and /identify. Since these two routes are inside a <Switch>, only first one (HomePage) get rendered.
Related
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'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors.
In Router.js
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
In SinglePriceGrid.js
import React from 'react';
import '../css/SinglePriceGrid.css'
class SinglePriceGrid extends React.Component {
render() {
return (
<div className="SinglePriceGrid">
<h1>Hello Single Price Grid!</h1>
</div>
);
}
}
export default SinglePriceGrid;
edit: Added the imports I used
edit: Readded the Switch, but it did not solve the problem
keep the Routes inside Switch. Try this
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
I'm really sorry, but the error is really humiliating. My path is wrong. I used "page" instead of "price" for the endpoint.
Currently working on a desktop app with NWJS.
The stack I'm using is the MERN stack. I'm currently through the Building phase, and I have a major issue: my routes (with React-Router) don't work once the app is built.
You'll find screenshots of the problem below: at start my app is supposed to render a login form, (with react router).
I've tried most things, from refactoring, to getting rid of console warnings..
Yet everything in Dev works (through npm start). My Routing has no issues..
I just don't get it
import React, { Component } from "react";
import "./App.css";
import FormSignin from "./containers/form/form.js";
import { BrowserRouter as Router, Route, Switch } from "react-
router-dom";
import Dashboard from "./containers/dashboard/dashboard.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import LoaderApp from "./components/loader.js";
import Selector from "../src/components/selector";
import Footer from "../src/containers/footer";
class App extends Component {
renderLoading() {
return <LoaderApp />;
}
render() {
return (
<Router>
<div className="App">
<Selector/>
<header className="App-header">
<Switch>
<Route exact path="/" component={FormSignin} />
<PrivateRoute exact path="/dashboard" component={Dashboard}
/>
</Switch>
</header>
<Footer/>
</div>
</Router>
);
}
}
export default App;
What is expected (working in dev) : dev
What actually happens on prod build : prodIssue
This worked for me finally.
import React, { Component } from "react";
import "./App.css";
import FormSignin from "./containers/form/form.js";
import { HashRouter, BrowserRouter, Route, Switch } from "react-router-dom";
import Dashboard from "./containers/dashboard/dashboard.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import LoaderApp from "./components/loader.js";
import Selector from "../src/components/selector";
import Footer from "../src/containers/footer";
class App extends Component {
renderLoading() {
return <LoaderApp />;
}
render() {
return (
<BrowserRouter>
<div className="App">
<Selector/>
<header className="App-header">
<Switch>
<PrivateRoute path="/dashboard" component={Dashboard} />
<HashRouter>
<Route exact path="/" component={FormSignin} />
</HashRouter>
</Switch>
</header>
<Footer/>
</div>
</BrowserRouter>
);
}
}
export default App;
so im using react router and formik to create a multi step form. ive based my booking application on this article.
https://codedaily.io/tutorials/50/Create-a-Form-Wizard-with-Data-Loss-Prevention-using-Formik-and-React-Router
ive got the basic routing down. Im just trying to redirect the user to Section 1 of my booking form when they land on the /make-a-booking url. its pretty simple but im not sure if im missing something. So the issue im having is that the ContactSection isnt rendering anything. Is it possible to create a multi step form with just formik?
Here is the link to the githib repo.
https://github.com/umxr/booking-form
Here is the code for the App.js
import React, { Component } from 'react';
import FormWizard from './components/FormWizard';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/make-a-booking" component={FormWizard} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contact} />
</Switch>
</Router>
</div>
);
}
}
export default App;
Here is the code for the FormWizard.js
import React, { Component } from 'react';
import Layout from './Layout';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { Formik, Form } from "formik";
import ContactSection from './sections/ContactSection';
import PhoneSection from './sections/PhoneSection';
class FormWizard extends Component {
render() {
return (
<Layout>
<Switch>
<Redirect from="/make-a-booking" to="/make-a-booking/contact" />
<Route exact path="/make-a-booking/contact" component={ContactSection} />
<Route exact path="/make-a-booking/phone" component={PhoneSection} />
</Switch>
</Layout>
)
}
}
export default FormWizard;
the contactSection and PhoneSection currently just render out a string along the lines of 'this is the phone section' etc
I think i got a problem using a very basic react router implementation.
When i load my "localhost:8080/dist/", it WORKS, load the header component that is being imported on App, and load the IndexRoute properly, but when i try to access "localhost:8080/dist/FPDV0200" or "localhost:8080/dist/FPDV0400" it dosnt work. Any clues?
app.component.tsx
import * as React from 'react';
import Header from '../header/header.component';
class App extends React.Component<any, any> {
render() {
return (
<div id="app">
<Header />
<div>
{this.props.children}
</div>
</div>
);
}
}
export default App;
app.component.tsx
import * as React from 'react';
import { Router, hashHistory, Route, IndexRoute } from 'react-router';
import App from '../components/structure/app/app.component';
import Home from '../pages/home/home';
import FPDV0200 from '../pages/FPDV0200/FPDV0200';
import FPDV0400 from '../pages/FPDV0400/FPDV0400';
const routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="FPDV0200" component={FPDV0200}/>
<Route path="FPDV0400" component={FPDV0400}/>
</Route>
</Router>
);
export default routes;
localhost:8080/dist/FPDV0200 - this url should work in case of usage browserHistory.
You use hashHistory, so your url should look like this
localhost:8080/dist#FPDV0200