0

I would like to ask a general question. I have a menuContent.js which is something like that.

class MenuContent extends Component {  


     constructor(props) {
     super(props)
      this.items = [];


    //   for (let i=1; i<=10; i++) {
    //  //   this.items.push(i)
    //   }
     }


  render() {

    return (

            <div className="menu">

               <a
                href="/animation/animation"
                onClick={this.props.closeCallback}
            >

                <img src={animation} alt="good as"/>
                animation
            </a>
            <br />
            <br />

     )
  }
}

and also a file which is called routing.js, which is something like that

class routing extends Component {  


     constructor(props) {
     super(props)
      this.items = [];


    //   for (let i=1; i<=10; i++) {
    //  //   this.items.push(i)
    //   }
     }


  render() {

    return (
        <HashRouter>
            <div className="menu">

                <ul className="header">
                                <li><NavLink to="/animation/animation">Animation</NavLink></li>
                    <li><NavLink to="/bars/bars">Bars</NavLink></li>
                </ul>
                <div className="content">
                    <Route exact path="/" component={Home}/>
                    <Route path="/animation/animation" component={Animation}/>
                    <Route path="/bars/bars" component={Bars}/>
                </div>

but i don't know how to call the routing.js into the menucontent file except for <routing /> into a the menucontent class

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
yan
  • 1
  • 4
  • What exactly is the issue in using `` apart from the fact that your component name must start with uppercase character. https://stackoverflow.com/questions/41216654/react-user-defined-jsx-components-not-rendering/41216726#41216726 – Shubham Khatri Apr 27 '18 at 08:11
  • I'm getting the following error:::: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Route`. – yan Apr 27 '18 at 08:15
  • Are you sure you have imported the Home, Animation and Bars component correctly and also exported them correctly – Shubham Khatri Apr 27 '18 at 08:18

1 Answers1

0

I'm not sure to have fully understood your question, but here is how to reuse components in React.

Simply code your Component as you wish and export it

import React from 'react';

class Routing extends React.Component {
    // code of component
}

export default Routing;

Now, your component Routing is available for any other script.

To reuse it, simply import it and use it like if it was in the same file.

import React from 'react';
import Routing from './Routing.js';

function() {
    return(
        <div>
            <Routing />
        </div>
    );
}
IPessers
  • 66
  • 1
  • 8
  • I want to put some working links inside the menuContent file, but if i am adding , i'm just adding the new page into MenuContent area and it doesn't load the page into the App area – yan Apr 27 '18 at 09:14
  • I fixed that by adding # in the path.. so it's like that now good as – yan Apr 27 '18 at 11:03