I am new to react.js . I have created a react website using create-rect-app. I have run: npm run build in git and got my static site files. Everything works on the test host, however when i moved hosts only index page works and navigating to other page gives 404 error. For routing im using react-router-dom.
How can i get my page to work on the other host?
Working host: http://000webhost.com/
Badly working host is some local provider
Edit: Basically i have pages such as /Home and /Contact.
Im using react-router-dom.
code:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from './pages/Home.jsx';
import Contacts from './pages/Contacts.jsx';
import Our_products from './pages/Our_products.jsx';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path ="/" component={Home}/>
<Route exact path ="/Home" component={Home}/>
<Route exact path ="/Contacts" component={Contacts}/>
<Route exact path ="/Our-products" component={Our_products}/>
</div>
</Router>
);
}
}
export default App;
My index is linked to /Home as you can see from code. i have uploaded Build folder to public_html on both hosting platforms. On one site works normaly, on the other only /Home page shows up.
So, you can ignore this, but what helped is changing
<a href="/" />
to
<Link to="/" />
. Basically one hosting provider could render links as
<a />
other only as
<Link />
Related
I'm trying to study React in the context of Django... React by itself works, Django also works. When I'm trying to work with React in the Django, it doesn't give me any troubles, but nothing is seen on the page.
I tried:
I installed all possible packages from React. I lowered the version of one package, I don't remember exact name of it right now... It gave me some faults, I lowered its version because it automatically installed alfa version.
Originally I installed React into the Django project, but then I realized, it is wrong way to do it and installed React as separate Django project...
I tried to look up if somebody else had the same problem as me, found two threads, I tried solutions, they didn't help unfortunately:
stackoverflow.com/questions/61125436/opening-a-new-react-portal-only-opens-an-empty-page-with-no-content
And one more I cannot find it right now...
I followed this blog:
www.valentinog.com/blog/drf/
My code.
I have to mention. I start node.js in one cmd window with 'npm run dev' and after I start Django project in another cmd window... with 'python manage.py runserver'... Both start without any complaints...
The structure is quite standard, two projects... frontend(React) and sc(Django)...
frontend/src/index.js:
//import App from "./components/App";
import React from 'react';
import ReactDOM from 'react-dom';
import '/static/css/index.css';
import '/src/components/App.js';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import '/node_modules/bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('app'));
serviceWorker.unregister();
frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h4>To Do List</h4>
</div>
);
}
}
export default App;
frontend/templates/frontend/index.html(these folders included in settings.py as templates, so Django has to see files in theses folders):
<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<body>
<div id="app"></div>
+{% render_bundle 'frontend' %}//the + sign can be seen on the page
</body>
</html>
sc_s/urls.py:
path('front_index/', views.front_index, name='front_index'),
sc_s/views.py:
def front_index(request):
return render(request, 'frontend/index.html')
Please let me know if I forgot some code...
I am Making a simple app using create-react-app
but the server stops and won't update with changes
Plz Help
npm version 6.14.4
node version 10.19.0
Ubuntu 20.04 LTS
WSL 2 Windows 10 Home\
My Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
My app.js
import React from 'react';
import Palette from './Palette';
import seedColors from './seedColors'
import './App.css';
function App() {
return (
<div className ="App">
<Palette colors ={seedColors[3]}/>
</div>
);
}
export default App;
My Palette.js
import React, { Component } from "react";
class Palette extends Component{
render(){
return(
<div><h1>Palette</h1></div>
)
}
}
export default Palette
The seedColors.js ,I have taken from https://github.com/Colt/react-colors/blob/master/colors-app/src/seedColors.js
Try adding a .env file to your root project directory (where you have package.json and node_modules). Then inside .env, add CHOKIDAR_USEPOLLING=true. This just worked for me when I was having issues with hot reloading not working. Apparently the "watcher" requires this setting when working with a VM (like WSL). I found this recommended in the top answer here: React create app hot reload is not always working on linux
I fetch a list of articles from my site backend (nodejs) and print it in the react demo app.
The app works correctly from the Web. When I try to start it in Android I get the following error:
Invariant failed: Browser history needs a DOM
I think the problem is here:
import {BrowserRouter, Router, Link, Route, Switch} from 'react-router-dom';
...
<BrowserRouter>
<Switch>
<Route path="/detail/:id" component={RouterDetail}/>
<Route exact={true} path="/home" render={() => content}/>
</Switch>
</BrowserRouter>
I have read everything on the web about this error but I have not been able to understand the problem.
I found a lot about react server side.
But my case is different, i use react only as a frontend.
I also tried the following change, from web works, on android I encounter the same problem:
import { Router } from "react-router";
import {Link, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
...
const history = createBrowserHistory();
...
<Router history={history}>
<Route path="/detail/:id" component={RouterDetail}/>
<Route exact={true} path="/home" render={() => props.content}/>
</Router>
I'm not sure why my react website is taking so long to load. It takes 43 seconds
All I have is in index.jsx
import ReactDOM from "react-dom";
import React from "react";
import { HashRouter, Route } from "react-router-dom";
import Home from "./components/Home";
ReactDOM.render(
<HashRouter>
<div>
<Route exact path="/" component={Home} />
</div>
</HashRouter>,
document.getElementById("main")
);
Home.jsx: imports react and renders hi
webpack.config.js : https://pastebin.com/raw/zdUws0R8
package.json : https://pastebin.com/raw/VR6pSP44
index.html : https://pastebin.com/raw/9AVNBpTN
I checked your website and it seems to be working fine to me for now;
For more details, I have added a:
Website Request screenshot
You might want to have a look at your SSL certificate though.
All the best!
I think you need to reinstall your project via :
npx create-react-app YourProject
and use
BrowserRouter
instead of
HashRouter
in 'react-router-dom'
then start the development server after creating the components or editing it via
npm start
I have deployed my React App on expressjs, I have httpd already setup to redirect all request /MyApp to my application on expressjs.
Once the expressjs server is up I am able to access my application as http://localhost:3000/.
I have Routers in my react app which will route me to the login page on the above call.
When I try to access through httpd as http://localhost/MyApp/, I get a blank page, the component doesn't get rendered.
Assuming that react-router is unable to handle /MyApp/.
How can I achieve this?
app.use, app.get with the route "/MyApp" didn't work.
App.tsx
<Router>
<Route render={({ location, history }) => (
<React.Fragment>
<Suspense fallback={<Loader/>}>
<Switch>
<Route path="/" exact component={Login} />
<Route path="/home" component={LoginSuccess} />
</Switch>
</Suspense>
</React.Fragment>
)}
/>
</Router>
Using BrowserRouter