I'm trying to have a Home Page and with differents links redirect to the differents pages of my app.

I used <Routes> and <Route> to redirect them but is not working. It stay in blank.

I want to Navebar be the layout here, so I read that it must contain the other Routes inside of it

import React from 'react';
import { Route, Routes } from 'react-router';
import './App.scss';
import Navbar from './components/Navbar/Navbar'
import Home from './components/Home/index'
import Contact from './components/Contact'
const App = () => {
    return (
        <>
        <Routes>
            <Route path='/' element={<Navbar/>}>
                <Route exact={true} index element={<Home/>}></Route>
                <Route exact={true} path='contact' element={<Contact/>}></Route>
            </Route>      
        </Routes>

        </>

    );
}

export default App;

index.js

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
    <BrowserRouter> 
      <App />
    </BrowserRouter>
    </React.StrictMode>
);

This is the Navbar (which is the onlyone is showing)

class Navbar extends Component{
    state = { clicked: false}

    handleClick = () =>{
        this.setState({clicked: !this.state.clicked})
    }

    render(){
        return(
            <>
                <nav className='navbar-items'>
                    <img alt='mRadio' className='navbar-logo' href="../Home/index" src={require('../../assets/images/mRadio.png')}></img>
                    <div className='menu-icon' onClick={this.handleClick}>
                        <i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
                    </div>
                    <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
                        {MenuItems.map((item, index)=>{
                            return (
                                <li key={index}>
                                    <a className={item.cName} href={item.url}>{item.title}</a>
                                </li>
                            )                            
                        })
                        }                   
                    </ul>
                </nav>
            </>
        )  
    } 
}

And this is the Home page:

const Index = () => {
    return (
        <div className='main'>
            <video src={videomRadio} autoPlay loop muted/>
        </div>
    );
}

And this is a Third page:

const Index = () => {
    return (
        <div>
            <p>CONTACT PAGE</p>
        </div>
    );
}

CodePudding user response：

If you re using the latest version 6, don't use Switch, now is become Routes, try to change the path like this for example if is nested component:

import { Route, Routes } from 'react-router-dom'; //just in case

//...

const App = () => {
    return (
        <>
        <Routes>
            <Route path='/' element={<Navbar/>}>
              <Route index element={<Home/>} />
              <Route path='contact' element={<Contact/>}/>
            </Route>
        </Routes>
       </>
    );
}
export default App;

CodePudding user response：

create a child in home and third page.that gives access to that page directly.