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
Related
I have code as below. I want Navigation component to appear on Home and About page, but not in Contact. How can I do that ?
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Just add a condition to check if your route is contact or not and don't render the content of Navigation by returning null. You can get the url using window.location.
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.
I am trying to make my app redirect the users to a login page if it does not detect a Meteor.userId(), and to the home page if they do have one. The problem I am struggling with right now is getting a simple console.log function to run when a user visits a route (regardless of the path). How would I do this from a file the manages all the routes and components without having to insert a boilerplate code in each component.
import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Switch, BrowserRouter, Route, Redirect, Link } from "react-router-dom";
import { Tracker } from "meteor/tracker";
import Login from "../ui/authentication/Login";
import Signup from "../ui/authentication/Signup";
import Home from "../ui/Home";
import searchNotes from "../ui/searchNotes"
import Note from "../ui/Note";
import fullSize from "../ui/fullSize"
import userProfile from "../ui/userProfile";
import AddNote from "../ui/AddNote";
import questions from "../ui/questions"
import NotFound from "../ui/NotFound";
export default class Routes extends React.Component{
componentDidMount() {
console.log("rendering page")
}
render(){
return (
<div>
<BrowserRouter>
<Switch>
<Login path="/login" />
<Signup path="/signup" />
<Route path="/" component={Home} exact/>
<Route path={`/searchNotes/:subject`} component={Note} />
<Route path={`/searchNotes`} component={searchNotes} />
<Route path={`/fullSize/:noteId`} component={fullSize}/>
<AddNote path="/addNote"/>
<Route path="/questions" component={questions} />
<Route component={userProfile} path={`/users/:userId`} />
<NotFound />
</Switch>
</BrowserRouter>
</div>
)
}
}
Also, I tried doing export default withRouter(Routes) so I can change the redirect people to new pages, but when I do this it returns an error in the browser saying, "Uncaught TypeError: Cannot read property 'route' of undefined" If you know how to fix that, it would be much appreciated. Thanks!
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.