I am in the process of migrating my React App from React-Router-3 to React-Router-4 and I am having a few issues. The layout of my application is as follows.
build
node_modules
public
src
AboutScreen
ContactScreen
HomeScreen
LoginScreen
SignUpScreen
WorkRequestScreen
App.js
index.js
routes.js
serviceWorker.js
package.json
package-lock.json
I am getting the following error:
./src/index.js: Line 8: Unexpected use of 'history' no-restricted-globals
When I remove the history={history} from index.js, I get the following error.
TypeError: Cannot read property 'location' of undefined
I have been following the following tutorial to migrate from 3 to 4.
https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
My route.js looks like this:
import React from 'react';
import { Route, Redirect, Router, Switch } from 'react-router-dom';
import createHashHistory from 'history/createHashHistory';
import App from './App';
import Home from './HomeScreen/Home';
import WorkReq from './WorkRequestScreen/WorkReq';
import About from './AboutScreen/About';
import Contact from './ContactScreen/Contact';
import Login from './LoginScreen/Login';
import Signup from './SignUpScreen/Signup';
const history = createHashHistory();
const routes = () => (
<Router history={history}>
<Switch>
<Route exact path="/workReq" component={WorkReq}/>
<Route exact path="/about" component={About}/>
<Route exact path="/contact" component={Contact}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/" component={Home}/>
</Switch>
</Router>
);
export default routes;
My index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Route, Redirect, Router, Switch } from 'react-router-dom';
import routes from './routes';
ReactDOM.render(<Router history={history} routes={routes}/>,
document.getElementById('root'));
serviceWorker.unregister();
Passing history explicitly isn't required as Route is passed history implicitly as prop. 1
I'd remove history prop passed to Router from the index.js and also remove it from Router in routes.js
Related
I am trying to use routing for the first time and followed the exact instructions from Youtube
App.jsx
import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Customer from "./components/customer";
import Movies from "./components/moviesComponent";
import NotFound from "./components/not-found";
import Rentals from "./components/rentals";
class App extends Component {
render() {
return (
<Routes>
<Route path="/movies" element={<Movies />}></Route>
<Route path="/rentals" element={<Rentals />}></Route>
<Route path="/customers" element={<Customer />}></Route>
<Route path="/not-found" element={<NotFound />}></Route>
</Routes>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "hover.css";
import "./App.css";
import { BrowserRouter, Routes } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<App />
</Routes>
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
I get the following error:
Uncaught Error: [App] is not a <Route> component. All component
children of <Routes> must be a <Route> or <React.Fragment>
I am using react-router latest version.
Just render App in the router, not a Routes component. Only Route and React.Fragment components are valid children of the Routes component.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Looks like you have Routes tag at 2 places. One in App.js and one in index.js. You should remove it from index.js file and than give it a try.
https://reactrouter.com/docs/en/v6/getting-started/overview
Is it possible to host React JS/ Node JS project inside the AWS S3 without using AWS CDN because my CDN is currently hosted at Cloudflare and it can be a problem to migrate my DNS to AWS DNS.
I have attempted to setup a AWS S3 bucket and set it as static hosting purpose and generate production build from my React JS project.
But I keep enouncter access denied error when I accessed the generated AWS S3 bucket hostname.
May I know how can I resolve this?
I have followed this resource.
But my React App still not working properly. If it is working properly, it should redirect me to https://s3.hosting.com/ with present the view that I specify in the react router.
Below are my code snippet for index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
let app = document.getElementById('root');
history.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
setTimeout(() => {
history.replace(path);
}, 100);
}
});
// 2. Render our app
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,app);
reportWebVitals();
Below are my code snippet for App.js
import './react-datepicker.css';
import './App.css';
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ViewOrder from "./components/vieworder";
import CreateOrder from './components/createorder';
import ViewAllOrder from "./components/viewallorder";
import ViewRestaurant from "./components/restaurant";
import ViewBranches from "./components/branch";
import ViewBranchOrder from "./components/viewbranchorder";
import ViewAllConsumer from './components/consumer';
import Auth from "./components/auth";
import Profile from "./components/profile";
import ViewTransaction from "./components/transaction";
import ViewAccessToken from "./components/viewaccesstoken.js";
import NotFoundPage from "./components/notfoundpage";
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
class App extends Component {
render(){
return (
<Router>
<Switch>
<Route exact path="/auth" component={Auth} />
<Route exact path="/" component={Auth} />
<Route exact path="/order" component={ViewAllOrder} />
<Route exact path="/transaction/user/:userId" component={ViewTransaction} />
<Route exact path="/token/:userId" component={ViewAccessToken} />
<Route exact path="/transaction" component={ViewTransaction} />
<Route exact path="/order/v/:orderId" component={ViewOrder} />
<Route exact path="/storeFront/:storefrontToken/order/create" component={CreateOrder} />
<Route exact path="/consumer" component={ViewAllConsumer}/>
<Route exact path="/restaurant" component={ViewRestaurant}/>
<Route exact path="/profile" component={Profile}/>
<Route exact path="/profile/:uid" component={Profile}/>
<Route exact path="/ViewBranches" component={ViewBranches}/>
<Route exact path="/restaurant/:restaurantId/branch" component={ViewBranches}/>
<Route exact path="/restaurant/:restaurantId/branch/:branchId/:branchName/order" component={ViewBranchOrder}/>
<Route exact path="*" component={NotFoundPage}/>
</Switch>
</Router>
);
}
}
export default App;
I want to insert via URL some data like an ID.
Example: somewebsite.com/movie/(ID_GOES_HERE)
But i can't understand how to make it happen. I want the data to go in the url and i want to retrieve it in movie.js, how do i do that?
I installed router dom in the app.
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App';
import MovieDetail from './Movie';
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<Switch>
<Route exact path='/' component={App}/>
<Route path='/movie' component={Movie}/>
</Switch>
</Router>,
document.getElementById('root')
);
It is expected to show the ID in Movie.
From react-router documentation:
./App
<Route path="/movie/:movie_id" component={Movie} />;
./Movie
// All route props (match, location and history) are available to Movie
export function Movie(props) {
return <h1>Show movie {props.match.params.movie_id}!</h1>;
}
Very new to react, I'm trying to separate the landingpage, login/signup and the app in react router but I cant to make it work, the page always loads the layout of the landing page and under it the login.
// Imports
import 'bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
// Data
import Landing from "./components/landing/landing";
import login from './components/app/auth/login';
// App
const Root = () => (
<Router>
<Route path="/" component={Landing} />
<Route path="/login" component={login} />
</Router>
)
ReactDOM.render(
<Root />,
document.querySelector("#root")
)
// Service worker
serviceWorker.unregister();
You have to use exact path within the component. It will look like <Route exact path="/" component={Landing} />
The same goes for the login page.
What should I change in my config/routes.js file to make it use modules/router files written for the React front-end ?
config/routes.js file:
module.exports: {}
module/router.js:
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from './App'
import About from './About'
import Repos from './Repos'
import Repo from './Repo'
import Home from './Home'
module.exports = (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
)
I am using webpack, babel for bundling. Really stuck with this.
Currently, the first page is rendered by assets/index.html but if I refresh from any other page (whose address is not /), I get 404 from the server, even though the path is defined in the react router file.
Please help.
EDIT
Here's my index.js file (serves as the React entry point):
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById('app')
)