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.

CodePudding user response：

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>
}