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
Related
I Try this code to companion tow composts in react using routs but it render blank page
import React from 'react';
import { Routes , Route } from 'react-router-dom';
// import * as BooksAPI from './BooksAPI'
import './App.css';
import SearchBook from './components/SearchBook';
import Main from './components/Main';
class BooksApp extends React.Component {
state = {
showSearchPage: false
}
render() {
return (
<div className="Root">
<Routes>
<Route exact path="/" element={<Main />} />
<Route path="/search" element = {<SearchBook />}/>
</Routes>
</div>
)
}
}
export default BooksApp
when i tried to render the components directly like this
render() {
return (
<div>
<Main />
<SearchBook />
</div>
)
}
it worked fine
It is better to configure all the routes inside the App.js. If your are providing routes inside BooksApp component. Please make sure, you have imported and called the BooksApp component in the App.js.
You need to import BrowserRouter and wrap all routes inside the BrowserRouter as like given below,
import React from 'react';
import { Routes , Route, BrowserRouter as Router } from 'react-router-dom';
// import * as BooksAPI from './BooksAPI'
import './App.css';
import SearchBook from './components/SearchBook';
import Main from './components/Main';
class BooksApp extends React.Component {
state = {
showSearchPage: false
}
render() {
return (
<div className="Root">
<Router>
<Routes>
<Route exact path="/" element={<Main />} />
<Route path="/search" element = {<SearchBook />}/>
</Routes>
</Router>
</div>
)
}
}
export default BooksApp
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 trying a simple routing with React. My understanding is that with the below, the Navi component being routed should only appear in the root url and not appear in any other url, however this is not the case - no matter the url, the component always appears. Could someone explain what I am missing?
import React, { Component } from "react";
import Home from "./Home";
import Navi from "./Navi";
import Welcome from "./Welcome";
import logo from "./logo.svg";
import "./App.css";
import { Route, BrowserRouter as Router } from "react-router-dom";
class App extends Component {
constructor() {
super();
this.state = { user: "kungpow" };
}
render() {
return (
<div>
<Router>
<Navi user={this.state.user} />
<Route exact link="/" Component={Navi} />
</Router>
<Home user={this.state.user} />
<Welcome user={this.state.user} />
</div>
);
}
}
export default App;
Your are missing path prop. Replace link with path prop.
<Router>
<Route exact path="/" render={() => <Navi user={this.state.user} />} />
</Router>
I am trying to learn react route configuration. I am adding all the navigation link at one place which is entry point index.js and my expectation is when someone react to the path configured during navigation, respective component should be loaded in the briwser. I am adding all the route path in my entry file index.js as follow:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import { BrowserRouter, Route, hashHistory } from 'react-router-dom';
import AboutUs from './AboutUs.js';
import ContactUs from './ContactUs.js';
import {Switch} from 'react-router';
ReactDOM.render(
(<BrowserRouter>
<Switch>
<Route path="/" component={App}/>
<Route path="/about-us" component={AboutUs}/>
<Route path="/contact-us" component={ContactUs}/>
</Switch>
</BrowserRouter>)
, document.getElementById('app'));
app.js is as follows :
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about-us">About</Link></li>
<li><Link to="/contact-us">Contact</Link></li>
</ul>
</div>
)
}
}
export default App;
AboutUs.js is as follows :
import React, { Component } from 'react';
class AboutUs extends Component {
render(){
return(
<div>
AboutUs
</div>
);
}
}
export default AboutUs ;
ContactUs.js is as follows :
import React, { Component } from 'react';
class ContactUs extends Component{
render(){
return(
<div>
Contact Us
</div>
);
}
}
export default ContactUs;
But when I click on any of the link /about-us or /contact-us , it does not load any content and displays the same app.js as follows
Can someone please tell me why it is happening?
Switch renders the first route that it matches in the order that it is given.
<BrowserRouter>
<Switch>
<Route path="/about-us" component={AboutUs}/>
<Route path="/contact-us" component={ContactUs}/>
<Route path="/" component={App}/>
</Switch>
</BrowserRouter>
Because you had given '/' as first route, anything would match it and render App component.
I belive it's matching your first Route, the App one since you haven't specified that it should be exact.
You can do this :
<Switch>
<Route exact path="/" component={App}/> // it will match only for '/'
<Route path="/about-us" component={AboutUs}/>
<Route path="/contact-us" component={ContactUs}/>
</Switch>
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.