CODEWITHSUNDEEP
reactjsreact-router-dom
user18644175
user18644175

Reputation:

The react-router-dom doesn ' t work well and the screen turns out white

I'm making few practica but when I loaded the router into my new "project" in react-router-dom v6 the screen turns white like I compile the router wrong.

import React from "react";
import ReactDom from "react-dom";
import {BrowserRouter, Route, Routes } from "react-router-dom";
import { about } from ".//views/about.js"

export default function App() {
  return (
    <BrowserRouter> 
      <Routes>
        <Route exact path="/about" element={<about />} />
        <Route path="/inicio" element={<home />} />
      </Routes>
    </BrowserRouter>
  );
}

This is my about.js

import React from 'react'

export default function about() {
  return <div>Soy una pagina de practica</div>
}

In other forum, I've told that use the <Switch> method, but I used react-router-dom v6 and need to use <Routes>. So if anyone can help I'd be grateful because I tried everything nothing seems to work me.

Upvotes: 2

Views: 418

Answers (2)

Arman
Arman

Reputation: 801

Change the App component as below:

import React from "react";
...
import About from "./views/about.js" // remove the curly braces as it's a default export

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202638

Proper React components are Capitalized.

Rendering a Component

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

The About component is also default exported, so it needs to also be default imported (as opposed to named exports/imports).

import About from "./views/about.js";

export default function App() {
  return (
    <BrowserRouter> 
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/inicio" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

...

export default function About() {
  return <div>Soy una pagina de practica</div>
}

Upvotes: 1

Related Questions