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"})
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} />