TransWikia.com

React JS - route does not pick the required Component

Stack Overflow Asked by Nirjal Paudel on November 10, 2021

Error

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

MY dependencies

{
  "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"
  },

My project tree structure is

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP