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.
Related
I am trying to make a simple react-router. But it's not even working. If I don't include the <Routes> tag the page is blank. After including the <Routes> tag it is also not working. Please take a look.
import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Route, Routes }from 'react-router-dom';
function App () {
return (
<Router>
<main>
<Nav/>
<Routes>
<Route path="/about" component={About}/>
</Routes>
<Routes>
<Route path="/shop" component={Shop}/>
</Routes>
</main>
</Router>
);
}
export default App;
Edit: I am using the latest version (6.3.0) of react-router-dom.
It looks like you are mixing syntax for React Router v5 and v6. <Routes> tag is used in v6, but component field in <Route> is used in v5. You should be using v6 as it's the latest release, so you have to change component to element. You also can't have multiple <Routes> side by side.
The documentation has a working example at the very top, I suggest you start with that and modify according to your needs. Then if something breaks you can go back and see what you have done wrong.
I would like to use BrowserRouter for creating multi-page react appplication where I can access different modules with different router names.
I can switch between Home and About modules with http://localhost:3000/home and http://localhost:3000/about respectively.
My main intention to create this router-based application is to deploy the build files into server from where we need to access the project.
I can access my project with http://localhost:8080/myapp/index.html after deploying the files into one of my context folders(myapp).
Problem is how to switch between modules which I can do with http://localhost:3000/home.
How to access Home and About modules from deployment.(Tomcat).
PLease help me on this.
App.js :
import React from "react";
import "./App.scss";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Link, Route } from "react-router-dom";
import About from "./About";
import Home from "./Home";
function App(props) {
return (
<Router>
<Switch>
<Route path="/home" render={() => <Home />} />
<Route path="/About" render={() => <About />} />
</Switch>
</Router>
);
}
export default App;
I deployed my react js site. but it can't load pages through url.
it can load homepage https://cekedu.netlify.app/ and when I click sign in it goes to the login page.
but I can't directly go to login page by entering url https://cekedu.netlify.app/login.
but it works in development.
import React from 'react'
import './css/typicons.min.css'
import ReactDOM from 'react-dom'
import User from './components/user'
import Header from './components/homeHeader'
import Home from './components/home'
import {Route, BrowserRouter as Router , Switch,Link} from 'react-router-dom'
import './index.css'
import './css/style.css'
import './css/bootstrap-grid.css'
class App extends React.Component{
render(){
return(
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</Router>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
You need to make sure that all paths respond with your the index.html page that your React app is used in.
For netlify, create a file named "_redirects" in the public foler and add this.
/* /index.html 200
You can also try by using "exact" prop in Route of Home component.
<Route exact path="/">
<Home/>
</Route>
Add "exact" prop to Route which it's path is also included by another Route's path.
For example home path '/' is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with '/*'.
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route exact path="/">
<Home/>
</Route>
</Switch>
</Router>
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
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