Stack Overflow Asked by Nirjal Paudel on November 10, 2021
My react JS app is not working in handling route. I have put route like this in my app.js file
import React from 'react';
import {
BrowserRouter,
Switch,
Route,
} from 'react-router-dom';
import Header from './components/header//header';
import './App.css';
import DetailViewM from './components/body/detailviewm';
const App = () => (
<BrowserRouter>
<div>
<Switch>
<Route name="home" exact path="/" component={Header} />
<Route name="moviedetailview" path="/movie/:id" component={DetailViewM} />
</Switch>
</div >
</BrowserRouter >);
export default App;
My movie is being handled by this component with source code
import React from 'react';
import Review from './reviews';
import Recommendation from './recommendation';
// import { useParams } from 'react-router-dom';
class DetailViewM extends React.Component {
state = {
api_key: 'apirkru',
loaded: false,
detail: {},
}
componentWillMount() {
// for item info
console.log(this.props);
let url = '';
const movieid = this.props.match.params.id;
url = `https://api.themoviedb.org/3/movie/${movieid}api_key=${this.state.api_key}&language=en-US&append_to_response=videos`;
fetch(url)
.then(resp => resp.json())
.then((res) => {
this.setState({ detail: res });
});
this.setState({
loaded: true,
});
}
render() {
console.log(this.props);
return (<div>rendered</div>);
}
}
But my browser is not displaying anything in that link.
Here is the picture of that
[![Nothing][1]][1]
[1]: https://i.stack.imgur.com/brDKx.png
{
"name": "movieapp",
"dependencies": {
"eslint-config-react-app": "^5.2.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^5.2.0"
},
D:.
│ App.css
│ App.js
│ App.test.js
│ index.css
│ index.js
│ logo.svg
│
└───components
├───body
│ detailviewm.js
│ detailviewTV.js
│ moviecard.js
│ recommendation.js
│ recommendationcard.js
│ reviews.js
│
└───header
header.css
header.js
navbar.js
searchbar.js
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP