create routes with react-router-dom

The situation is as follows, I'm using react-router-dom in an app in ReactJS, I'm learning how to use ReactJS. So I create two routes 'Logon' and 'Welcome', but every time I use react-router-dom I can not visualize my routes, the only thing I can visualize in http//:localhost:3000 is the "background: #f0f0f5; which I created in global.css", it seems that the routes do not exist. So I wanted some help to understand why React is not showing the pages from my app 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>
     
    );
}

Roads.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 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"})

Author: anderson, 2020-04-07

1 answers

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

Your route is being defined as follows:

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

Notice that the property component is written incorrectly: componemt


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

<Route path= "/"  exact component= {Logon} />
<Route path= "/Welcome"   component= {Welcome} />
 1
Author: Daniel Mendes, 2020-04-08 01:28:09