ReactFix
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • React
  • React Native
  • Programming
  • Object Oriented Programming

Friday, November 4, 2022

[FIXED] What is the best process of adding Routers to a web page in React

 November 04, 2022     react-router, reactjs   

Issue

× Error: link is a void element tag and must neither have children nor use dangerouslySetInnerHTML. ▶ 14 stack frames were collapsed. ./src/index.js C:/Users/HP/Desktop/portfolio-project/portfolio-project/src/index.js:11 8 | 9 | const root = ReactDOM.createRoot(document.getElementById('root')); 10 |

11 | ReactDOM.render(,document.getElementById("root")); 12 | 13 | //ReactDOM.render(,document.getElementById("super")) 14 | //ReactDOM.render(,document.getElementById("root")) View compiled webpack_require C:/Users/HP/Desktop/portfolio-project/portfolio-project/webpack/bootstrap:782 779 | }; 780 | 781 | // Execute the module function 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 783 | 784 | // Flag the module as loaded 785 | module.l = true;

import React from 'react';
import './App.css';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';

import {
    BrowserRouter as Router, 
    Routes, 
    Route, 
    Link
 } from 'react-router-dom';

function App() {
    return (
        <Router>
            <div className='App'>
                <ul>
                    <li>
                        <link to="/">Home</link>
                    </li>
                    <li>
                        <link to="/about">About Us</link>
                    </li>
                    <li>
                        <link to="/contact">Contact Us</link>
                    </li>
                </ul>
            </div>
                <Routes>
                    <Route exact path='/' element={<Home />}> </Route>
                    <Route exact path='/about' element={<About />}> </Route>
                    <Route exact path='/contact' element={<Contact />}> </Route>
                </Routes>
            
        </Router>
    );
   
}
export default App;


Solution

Trying changing the link to "Link"

 <Link to="/contact" >Contact</Link>


Answered By - Azzy
Answer Checked By - - Willingham (ReactFix Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home

Featured Post

Is Learning React Difficult?

React is difficult to learn, no ifs and buts. React isn't inherently difficult to learn. It's a framework that's different from ...

Total Pageviews

Copyright © ReactFix