create routes with React-router-dom

Question

The situation is this, I’m using the React-router-dom in an app in Reactjs, I’m learning to use Reactjs. So I create two 'Logon' and 'Welcome' routes, but every time I use React-router-dom I can’t see my routes, the only thing I can see at http//:localhost:3000 is the "background: #f0f0f5; I created in global.css" routes, it seems that the routes don’t exist. So I wanted some help to understand why React isn’t showing my app pages at http//:localhost:3000 when I use React-router-dom?

the code:

Logon It’s something simple just to learn how to create routes.

import React from 'react';
import { FiLogIn } from 'react-icons/fi';
export default function Logon(){
    return (
      
         <div>
          <form>faça se cadastro</form>
          <input placeholder= "seu id" />
          <button type="submit">Entrar</button>

          <a href="/Register">
              <FiLogIn size={16} color= "#e02041" />
              não tenho cadastro
          </a>
      
          </div>
     
    );
}

Routes.js

import React from 'react';

import {BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Logon from './pages/Logon';
import Welcome from './pages/Welcome';

export default function  Routes() {
    return (
        <BrowserRouter>
        <Switch>
            <Route path= "/"  exact componemt= {Logon} />
            <Route path= "/Welcome"   componemt= {Welcome} />
            
        </Switch>
        </BrowserRouter>
    );
}

App.js

import React from 'react';
import Routes from './Routes';
import './global.css';
function App() {
  return (
    <Routes/>
    
   );
}

export default App;

index js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

note: possible errors below when I installed the React-router-dom.

npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but None is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported Platform for [email protected]: Wanted {"os":"Darwin","Arch":"any"} (Current: {"os":"Win32","Arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules webpack-dev-server node_modules fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported Platform for [email protected]: Wanted {"os":"Darwin","Arch":"any"} (Current: {"os":"Win32","Arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules watchpack node_modules fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported Platform for [email protected]: Wanted {"os":"Darwin","Arch":"any"} (Current: {"os":"Win32","Arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules jest-haste-map node_modules fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported Platform for [email protected]: Wanted {"os":"Darwin","Arch":"any"} (Current: {"os":"Win32","Arch":"x64"})

Answer 1

The error is occurring because your Routes.js has an incorrect syntax in the tag <Route>.

Your route is being defined as follows:

<Route path= "/"  exact componemt= {Logon} />
<Route path= "/Welcome"   componemt= {Welcome} />

Realize that the property component is misspelled: componemt

---

Just correct the name of the property to component and with it your page will be displayed:

<Route path= "/"  exact component= {Logon} />
<Route path= "/Welcome"   component= {Welcome} />