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!
Related
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 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.
import React, {Component} from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import {Provider} from 'react-redux'
import Store from './store/configureStore'
import Register from "./view/RegisterView"
import Login from "./view/LoginView"
import Dashboard from "./view/DashboardView"
class App extends Component {
constructor() {
super();
}
render() {
return (
<div>
<Provider store={Store}>
<Router basename="/">
<div>
<Route exact path="/register" component={Register}>
</Route>
<Route exact path="/login" component={Login}>
</Route>
<Route exact path="/dashboard" component={Dashboard}>
</Route>
</div>
</Router>
</Provider>
</div>
);
}
}
export default App;
I have my App.js where i give my different route. When the Login is successful i want to go to my /dashboard route. (but we can access it only when we are logged in).
In my Login component i would like to change the route.
I try it to change it like that:
this.props.history.push("/dashboard");
but history is undefined.
I read some tutorial on google and they tell me that i can use:
onEnter={requireAuth}
in my /dashboard route
I don't know how i can change my route in my login component
I expect to login and to come in my /dashboard route (but only if i'm connected).
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
This problem might be a bug according to another post here React-Router v4: Cannot read property 'route' of undefined and apparently the person solved their problem by wrapping their routers in a browserRouter. However, I have done that already and still seem to be getting the error. Just like the other post, when I export my component with withRouter, it returns an error, however when I export it without it, it works fine. What I am trying to do is, find the pathname when a person loads a Route, check to see if they are authenitcated, if not, redirect to login, if they are, redirect to home. I've had this problem for a while now, if you know a solution please help me.
Routes.js
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{
render(){
const signedIn = Meteor.userId();
const UnauthPage = ["/login", "/signup"];
console.log(this.props)
// if(signedIn && ){
// console.log("Signed in")
// }
return (
<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>
)
}
}