The route is working fine on local. However, it is not working after the build except the home route which is working but the two route it gives 404 not found result. The login and registration component its a plain form not connected to any API or server and the home component its just a return plain text info.
I'm new to react so I don't know an idea why not working on build but perfectly working on development.
I tried to run both on serve build localhost:5000 and upload to the server but not working also.
import React, { Component } from 'react';
import {
Route,
Switch,
BrowserRouter as Router
} from 'react-router-dom';
import LoginComponent from './component/login/login'
import RegisterComponent from './component/registration/register'
import Home from './component/dashboard/template/home'
const NoMatch = ({location}) =>(
<div>
<h3>No Match for {location.pathname}</h3>
</div>
)
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/login' component={LoginComponent} />
<Route path='/register' component={RegisterComponent} />
<Route component={NoMatch} />
</Switch>
</Router>
);
}
}
export default App;
This is most likely an issue to do with how your server is set up. When visit the page, /login, the server is looking for a file called /login in the root. You need to configure a single entry-point to the server at index.html
In Apache this would be configured in .htaaccess or in nginx you can use a rewrite
Related
I am confused. Still learning Reactjs though and I am having this issue. I uploaded my react app to github pages. The only thing not working is the homepage on load. I mean, when I visit the site link, it doesn't display the homepage except I click the homepage link on the navigation bar.
However, while on my local machine, the home page works fine onload. No issues at all. I am still a novice and will appreciate any help rendered. Here is my code.
import Single from './pages/single/single'
import Home from './pages/home/home'
import TopBar from "./components/topbar/TopBar";
import Write from './pages/write/write'
import Settings from './pages/settings/settings'
import Login from './pages/login/login'
import Register from './pages/register/register'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const user = false;
return (
<Router>
<TopBar/>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/register">
{ user? <Home/> : <Register />}
</Route>
<Route path="/login">
{user? <Home/> : <Login />}
</Route>
<Route path="/write">
{user? <Write /> : <Register/>}
</Route>
<Route path="/settings">
{user? <Settings />: <Register/>}
</Route>
<Route path="/post/:postId">
<Single />
</Route>
</Switch>
</Router>
);
}
export default App;
Is there anything that I am doing wrong here?
You can try to update your import HashRouter instead of BrowserRouter
import { HashRouter } from "react-router-dom";
Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in Here is the proper documentiotion to deploy SPA using at github pages Link
I added a No Match 404 error page to my website, and it works fine when I go to the wrong path on localhost, but after I deploy and go to an invalid path like .../invalidpath I get the default netlify page not found error. Below is my App.js component:
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation/Navigation';
import Home from './pages/home/Home';
import Projects from './pages/projects/Projects';
import Contact from './pages/contact/Contact';
import NoMatch from './pages/404page/404Page';
import './App.scss';
function App() {
return (
<div className='app'>
<Navigation />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/projects' component={Projects} />
<Route path='/contact' component={Contact} />
<Route path='*' component={NoMatch} />
</Switch>
</div>
);
}
export default App;
If you've built the app with create-react-app and you're deploying to Netlify, you need to add a _redirects file inside the public directory of your project in order to support client side routing (React Router). It should have this inside:
/* /index.html 200
Details here.
Also, check the official docs from Netlify regarding for Redirects and rewrites
I have a react project, it's working perfectly fine in a local server but when I try to upload it in a production server it shows white/blank screen without having any errors in the console.
What I did was run 'npm run build', then upload the files compiled on the build project on my production instance. I also modified the package.json and put "homepage":"http://50.31.112.112/new_vehicle_management"
What's wrong with what I did?
This is the code for Route
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import {Login} from './components/Login';
import {Menu} from './components/Menu';
import {NewProcess} from './components/NewProcess';
import {ContinueProcess} from './components/ContinueProcess';
import {SearchProcess} from './components/SearchProcess';
import {CreateProcess} from './components/CreateProcess';
import {ProcessActivity} from './components/ProcessActivity';
import {ProcessContinueActivity} from
'./components/ProcessContinueActivity';
import {ProceedProcess} from './components/ProceedProcess';
function App() {
return (
<div className="App">
<Router>
<Route path="/login" component={Login}/>
<Route path="/menu" component={Menu}/>
<Route path="/newprocess" component={NewProcess}/>
<Route path="/continueprocess" component={ContinueProcess}/>
<Route path="/searchprocess" component={SearchProcess}/>
<Route path="/createprocess" component={CreateProcess}/>
<Route path="/processactivity" component={ProcessActivity}/>
<Route path="/processcontinueactivity" component=
{ProcessContinueActivity}/>
<Route path="/proceedprocess" component={ProceedProcess}/>
</Router>
</div>
);
}
export default App;
You may need to add basename="/new_vehicle_management" to your router.
<Router basename="/new_vehicle_management" />
When you run in localhost, your routes are in the server root (i.e.: localhost/login) but since you hosted the website in a deeper level you need to specify the basename, otherwise the pathname will never match any route.
Also don't forget to set something in path /, otherwise your website will render nothing when the user visits it.
<Route path="/" component={YourLandingPageComponent}/>
Edit.: basename works in react-router v4, otherwise you may need to set the basename in each route.
See https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string for more details.
I can't get my Router working in react. I am using webpack, thinking I miss some code in webpacn.config.js.
I tried to retype my url to localhost:8080/signin or localhost:8080/signup.
I got en error of
Cannot GET /signin
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'materialize-css/dist/css/materialize.min.css'
import Navbar from './Components/layout//Navbar'
import SignIn from './Components/authentication/SignIn'
import SignUp from './Components/authentication/SignUp'
class App extends React.Component {
constructor() {
super()
}
render() {
return (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route exact path='/signin' component={SignIn} />
<Route exact path='/signup' component={SignUp} />
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App
I think it's not related to Webpack. react's router system handles the routes in client-side so if you want to type URL manually, you should create a fallback URL to root path in the back-end side (based on your back-end tech) then react can handle entered URL.
I'm new with React. I'm using react-router-dom.
import React from 'react';
import { Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/home';
import Login from './components/login';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="app">
<Link to='/'>Home</Link>
<Link to='/login'>Login</Link>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/login' component={Login}/>
</Switch>
</div>
);
}
}
export default App;
I'm using this code everything work fine, but when I go to localhost:8080/login directly via de url I get a error Cannot GET /login but it goes well through a link <Link to='/login'>Login</Link>.
how can I fix it?
So this is often a tricky thing I deal with in regards to navigating with react.
By navigating directly to /login your React App hasn't actually rendered the highest parent or root and thus there really isn't a login component to find and render. Here's what I do when working with logins and home
<Route exact path="/" component={() => this.props.auth ? <DashboardContainer/> : <Redirect to="/" />}/>
This says if there isn't any auth (or local storage, or cookies, or whatever you're using to log them in) redirect back home or to / so they can click /login.
Basically you need your highest level component to mount virtually before you can do anything else. You can also make /login your landing page, so in this case merge / and /login. But the above example is modularized and dynamic.