Блог

У меня есть несколько компонентов и маршрутов в моем приложении. У меня есть боковое меню, в котором есть ссылки на другие компоненты моего приложения. Я попытался добавить компоненты, но это ничего не дает, это отображает пустую страницу. Не уверен, что я делаю не так. Любая помощь приветствуется.

Это мой Компонент:

 import React from 'react';
import AddNewFileMT from './AddNewFileMT';
import Home from '../routes/Home';

const SideMenu = () => {
    return (
        <div>
            <nav>
                <div>
                    <ul className="sidebar"> 
                        <br />  
                        <li>
                            <a href={<Home />}>Home<i className="fas fa-home"></i></a>
                        </li>
                        <li>
                            <a href={<Archive />}>Archive<i className="fas fa-archive"></i></a>
                        </li>
                        <li>
                            <a href={<AddNewFileMT />}>Add New<i className="fas fa-folder-open"></i></a>
                        </li>
                        <li>
                            <a href={<Analytics />}>Analytics<i className="fas fa-chart-pie"></i></a>
                        </li>
                    </ul>
                </div>    
            </nav> 
        </div>
    );
};

export default SideMenu;
 

Затем в моем Маршруте у меня есть это:

 import React from 'react'
import Header from '../components/Header'
import SideMenu from '../components/SideMenu'
import RegionalMap from '../components/RegionalMap'
import Footer from '../components/Footer'

export const Home = () => {
    return (
        <div>
            <Header />
            <SideMenu />
            <RegionalMap/>
            <Footer />
        </div>
    )
};

export default Home;
 

Это адрес в браузере при нажатии на элемент sidemenu:
http://localhost:3001 /[объект Object]

Вам необходимо установить react-router-dom

импортируйте маршрутизатор и маршрут, затем перенесите ваши страницы между <Router> тегами. Вот так:

 <Router>
  <Route component={componentHere} />
  ...
</Router>
 

затем импортируйте ссылку в панель навигации, оберните свои ссылки с <Link> помощью атрибута добавления <Link to={/yourComponentName} />

Подсказка: добавьте точный атрибут на свою домашнюю страницу, иначе весь URL-адрес будет перенаправляться на «/», который является вашей домашней страницей.

В качестве документации React вы можете использовать элемент Link вместо тега привязки. Например:

     <Link to="/about">About</Link>
 

Взгляните на официальную документацию об элементах ссылок

В вашем случае вы можете использовать

     <Link to={ ROUTES.HOME } key='Home'>Home</Link>