如何在锚标签内链接 React 组件

Question

I have several components and routes in my app. I have a sidebar menu that has links to other components in my app. I tried adding the components but it does not ho anything, it renders a blank page. Not sure what I am doing wrong. Any help appreciated.

This is my Component:

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;

Then in my Route I have this:

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;

This is the address in the browser when a sidemenu item is clicked: http://localhost:3001/[object%20Object]

Answer 1

As React documentation , you can use Link element instead anchor tag. For example:

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

Take a look at the official documentation about Link elements

In your case, you can use

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

Answer 2

You need to install react-router-dom

import Router and Route then wrap your pages between a <Router> tag. Like this:

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

then import Link in your navigation bar wrap your links with <Link> then add attribute <Link to={/yourComponentName} />

Hint: add exact attribute to your homepage otherwise all URL will redirect to "/" which is your homepage.