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>;
}
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
// this is my index.js
import React, { } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store/configureStore";
import { Router } from "react-router";
import "./index.css";
import App from "./App";
import history from "./history";
// append app to dom
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
//this is my app.js
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import Inscription from "../src/pages/inscription";
class App extends Component {
render() {
return (
< BrowserRouter>
<Route exact path="/" component={Inscription} />
</ BrowserRouter>
);
}
}
export default (App);
I am having changing the view in react with routing. It seems I have tried everything I can google with no luck. the page affiche but doesn't load
Please same one can help mee :(
Try removing the BrowserRouter from the App component. You have already provided a Router in index.js. Also in case you want to define multiple routes, you have to use switch
<Switch>
<Route exact path="/" component={Inscription} />
<Route exact path="/hello" component={HelloComponent} />
<Switch>
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
Failed prop type: The prop history is marked as required in Router, but its value is undefined.
Index.js
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import Sstore from './store/configureStore.js';
import routes from './routes';
import {loadMovies} from './actions/movieActions.js';
const store = Sstore;
store.dispatch(loadMovies());
render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>,
document.getElementById('app')
);
Route.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Home from './components/Home.js';
export default (
<Route path="/" component={Home}>
</Route>
);
This is the correct link to react-router-redux v4 example. You have to use ConnectedRouter from react-router-redux and pass history. I configured my project yesterday based on this example and it works fine.
In React router v4, your configuration should be something like below.
import { BrowserRouter, Route, Switch } from 'react-router-dom';
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Switch>
<Route path="/api/:id" component={ComponentOne} />
<Route path="/" component={Home} />
</Switch>
</div>
</BrowserRouter>
</Provider>
The API has been changed since the previous version. Also note that the order matters. Keep the most specific paths at the top.
In my project, I get rid of this type of error in two steps:
step in to import import createBrowserHistory from 'history/createBrowserHistory'; and declaring const customHistory = createBrowserHistory(); like this:
import { BrowserRouter as StaticRouter, Router, Switch, Route, Link } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();
It looks like that it is necessary to add history attribute to the Router:
<Router history={customHistory}>
<div>
<Link to={'/.../' + linkName1}>
{itemName1}
</Link>
<Link to={'/.../' + linkName2}>
{itemName2}
</Link>
</div>
I'm very new to ReactJS. I was trying some tutorials to do routing but end up with errors where the "browserHistory" was undefined. The code and error message is as below.
Main.js
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, hashHistory,browserHistory} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
Error Message from browser console
Warning: Failed prop type: The prop history is marked as required in
Router, but its value is undefined.in Router
Kindly let me know if the implementation is out-of-date or if I have missed out any libraries to face this problem
I think I have found the reason, the new react-router does not support browserHistory anymore. To achieve the same goal I have used the following code.
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
Can you try useRouterHistory:
import { useRouterHistory } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const createAppHistory = useRouterHistory(createBrowserHistory);
const history = createAppHistory({
parseQueryString: parse,
stringifyQuery: stringify
})
<Router history={history}/>
React Router v4 changed things. They made separate top level router elements. Replace <Router history={hashHistory}> with <HashRouter> in your code.
import {HashRouter,Route} from 'react-router-dom';
<HashRouter>
<Route path = "/" component = {App} />
</HashRouter>