Routes React React-router-dom

Asked

Viewed 36 times

1

I’m starting at React and I’m trying to create internal navigation links. I’m wondering if I’m doing it the right way. created the Routes file

import React from 'react'
import {BrowserRouter, Switch, Route} from 'react-router-dom'
import { Profile } from '../components/Profile';
import { Skills } from '../components/Skills'

export default function Routes (){
    return(
        <BrowserRouter>
            <Switch>
                <Route path="/" element={Profile} />
                <Route path="/skills" element={Skills} />
            </Switch>
        </BrowserRouter>
            
    );
};

I imported the Routes file at index

import { Education } from '../components/Education'
import { Experience } from '../components/Experience'
import { NavigationBar } from '../components/NavigationBar'
import { Profile } from '../components/Profile'
import { Skills } from '../components/Skills'
import Routes from './routes'

export default function Home() {
  return (
    <div>
      <header>
        <NavigationBar />
      </header>

      <section>
        <Profile />
      </section>

      <section>
        <Skills />
      </section>

      <section>
        <Education />
      </section>

      <section>
        <Experience />
      </section>

      <footer>
        <Contacts />
      </footer>
      <Routes />
    </div>
  )
}

And I’m trying to use it on my navbar

import styles from '../styles/components/NavigationBar.module.css'
import './Skills.tsx'
import {Link} from 'react-router-dom'


export function NavigationBar() {
    return (
        <div className={styles.navBar}>
            <Link to="/"><h3>Inicio</h3></Link>
            <nav>
                <ul className={styles.navLinks}>
                    <li><Link to="/skills">Habilidades</Link></li>
                </ul>
            </nav>
        </div>
    );
}

Follow my app

import React from 'react'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

I’m having the following mistake

Error: Invariant failed: You should not use <Link> outside a <Router>
react

1 answer

1


You will need to involve the Browserrouter tags in every application, follow example below.

And you do not need to re-declare the pages in your Home, as they will be rendered as per route:

    import { Education } from '../components/Education'
    import { Experience } from '../components/Experience'
    import { NavigationBar } from '../components/NavigationBar'
    import { Profile } from '../components/Profile'
    import { Skills } from '../components/Skills'
    import Routes from './routes'
    
    export default function Home() {   return (
    <BrowserRouter>
       <div>
          <header>
             <NavigationBar />
          </header>
          <Routes />
          </div>
    </BrowserRouter>   ) }

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.