I am getting 404 error every time I am reloading any inner component. I always have to navigate to home page and then reload/refresh the page for the application to work again.
I have tried using the BrowserRouter but that didn't work either.
Here is my code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router, Route, Switch } from "react-router-dom";
const history = createBrowserHistory();
/** elements */
import Header from './components/elements/Header';
import Footer from './components/elements/Footer';
/** components */
import Projects from './components/Projects';
import ProjectsAdd from './components/ProjectsAdd';
import Categories from './components/Categories';
import CategoriesAdd from './components/CategoriesAdd';
export default class Index extends Component
{
render()
{
return (
<Router history={history}>
<div id="main">
<Header />
<section className="content">
<section id="pageRight">
<Switch>
<Route exact path={"/"} component={Projects} />
<Route path={"/projects/add"} component={ProjectsAdd} />
<Route exact path={"/categories"} component={Categories} />
<Route path={"/categories/add"} component={CategoriesAdd} />
</Switch>
</section>
</section>
<Footer />
</div>
</Router>
);
}
}
if (document.getElementById('layout'))
ReactDOM.render(<Index />, document.getElementById('layout'));
I found the solution (https://youtu.be/vNof0z32l84).
I hope this may come in handy for someone. However, If you feel there is a room for improvement then please let me know. :)
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
index.js page:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import NewUpload from './components/newUpload';
import Testing from './components/Testing';
import Landing from './landing/Landing';
import * as serviceWorker from './serviceWorker';
ReactDOM.render( <Router>
<Route path='/upload' component={NewUpload} />
<Route path='/' component={Testing} />
<Route path='/landing' component={NewUpload} />
</Router>, document.getElementById('root'));
Testing.js (this is the first page that loads upon npm start):
import React, { Component } from 'react';
export default class Testing extends Component{
render()
{
return ( <div>
<form action='/upload'>
<button type="button">click to upload</button>
</form>
</div>
)
}
}
So when I click on this button, it sure routes me to the new page, but the button is still visible on the new page as well. How do I get rid of this?
Add the exact prop to the Route component.
<Route exact path='/' component={Testing} />
This ensure that the path matches the location.pathname exactly.
See the docs here
I have made a simple application with ReactJS create-react-app and used react-router-dom. The routing works perfectly when it is on the local server, but when I build the app, and I upload it to shared hosting, the routing doesn't work, and I get 404. I don't know what is the problem.
I have followed many questions similar to mine StackOverflow, but none of them helped me, even I tried to use HashRouting instead of BrowserRouting but still the same problem.
The ROOT Component
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Register from './Components/Auth/register.jsx';
import Login from './Components/Auth/login.jsx';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router, Route} from 'react-router-dom';
ReactDOM.render(
<Router>
<Route path="/app" exact component={App} />
<Route path="/app/all" component={App} />
<Route path="/app/history" component={App} />
<Route path="/register" component={Register}/>
<Route path="/login" component={Login}/>
</Router>
, document.getElementById('root'));
serviceWorker.unregister();
Sub Component with Sub Children
import React, { Component } from 'react'
import '../SCSS/components.scss';
import ClockTable from '../Clock/Clock Components/clock-table'
import {Redirect, BrowserRouter as Router, Route} from 'react-router-dom'
import History from './Clock Components/history'
import All from './Clock Components/all'
import { Cookies } from '../Globals.js'
export class Clock extends Component {
constructor(props) {
super(props)
this.state = {
authenticated : null
}
}
componentDidMount(){
// new Cookies().deleteAllCookies()
if(new Cookies().getCookie('uid')){
this.setState({
authenticated : true,
})
} else{
this.setState({
authenticated : false
})
}
}
render() {
if(this.state.authenticated === false){
return <Redirect to='/login' />
}
return (
<>
<div className="container clock-sec">
<div className="row">
<div className="col-12">
<div className="big-head">
CLOCK
</div>
</div>
<div className="col-3">
<div className="clock-left-table clock-sub-sec">
<ClockTable />
</div>
</div>
<div className="col-9">
<Router>
<Route path="/app/all" exact component={All}/>
<Route path="/app/history" component={History}/>
</Router>
</div>
</div>
</div>
</>
)
}
}
export default Clock
As #Sung M. Kim mentioned in his comment you need to set up your server to always serve the index.html file for all requests (besides if you have api calls).
The way to set this up is different with each server.
Hello! What I'm trying to do is rework my react-router so the NavLink renders a completely new page on click, instead of rendering at the bottom of the div, as shown in the gif above.
Here's the content of my main App.js component:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home.js';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
class App extends Component {
render() {
return (
<Router>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about/' component={About} />
<Route path='/september/' component={September} />
<Route exact path='/september/trilogy/' component={Trilogy} />
</Switch>
</div>
</Router>
);
}
}
export default App;
The Home component's code, which holds the NavBar that's used in the Home Page.
import React, { Component } from 'react';
import { BrowserRouter as Router, NavLink, Switch, Route } from 'react-router-dom';
import logo from './logo.png';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
let NavBar = () => {
return (
<div>
<h2 className="container2"><NavLink to='/about/'>About</NavLink> </h2>
<img src={logo} className="somersetLogo" alt="somersetLogo" />
<h2 className="container" >Contact</h2>
</div>
)
}
class Home extends Component {
render() {
return (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path='/about/' component={About} />
</Switch>
</div>
</Router>
)
}
}
export default Home;
Any idea what went wrong? Any help would be appreciated! Thanks!
If you are using react router v4 or above it should be something like this.
import { Link } from 'react-router-dom';
<Link to='/about'>
About
</Link>
Why you are defining router again in Home component which is not needed. Keeping route configuration in App component would be enough. Hope this helps. Happy coding !
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