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

user_18644175 0
Viewed 185

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.

react-router-dom reactjs
2 Answers

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

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
user_113992210
Related