Route function removes all displayed items in react.js-CodePudding

I have a react js project that I am working on and whenever I put this code (that is neccessary for my website):

<Route path='/contractor/:id' component={ContactorInfoScreen}/>
<Route path='/' exact={true} component={HomeScreen}/>

all the text, images etc. all disapear from my page. I have made sure that I have imported all the neccessary items from the correct file paths. These are the things that I have imported:

import logo from './logo.svg';
import data from './data';
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import HomeScreen from './screens/HomeScreen';
import ContractorInfoScreen from './screens/ContractorInfoScreen';

Is there possibly another item that I need to import that I have not already done so?

CodePudding user response：

There seems to be a typo in the name of the component ContractorInfoScreen in your Html...

This

<Route path='/contractor/:id' component={ContactorInfoScreen}/>

should be

<Route path='/contractor/:id' component={ContractorInfoScreen}/>

CodePudding user response：

There is a typo mistake on component={ContractorInfoScreen}