CODEWITHSUNDEEP
reactjsreact-router
george42
george42

Reputation: 1

Why wont react router render anything?

React Router isn't rendering anything at all. Im using the latest version of React Router and Passing in the components using the render function and passing in state as props. Here is a copy of my code so far. Thanks for any advice

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "George Hatzigeorgio",
      links: [
        { title: "home", path: "/" },
        { title: "about", path: "/about" },
        { title: "contact", path: "/contact" },
      ],
      home: {
        title: "Welcome to my portfolio site",
        subTitle: "Here are some of my projects",
        text: "Check out my projects below",
      },
      About: {
        title: "About Me",
      },

      Contact: {
        title: "Looking for a developer, Lets Chat! Contact Me!",
      },
    };
  }

  render() {
    return (
      <Router>
        <Container className="p-0" fluid={true}>
          <Navbar className="border-bottom" bg="transparent" expand="lg">
            <Navbar.Brand>George Hatzigeorgio</Navbar.Brand>
            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle"></Navbar.Collapse>
            <Nav className="ml-auto">
              <Link to="/" className="nav-link">
                Home
              </Link>
              <Link to="/about" className="nav-link">
                About
              </Link>
              <Link to="/contact" className="nav-link">
                Contact
              </Link>
            </Nav>
          </Navbar>
          <Route path="/" render={(props)=><Homepage title={this.state.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />  } />
          <Route path="/about" render={(props)=> <Aboutpage title= {this.state.About.title}/>} />
          <Route path="/contact" render={(props)=> <ContactPage title= {this.state.Contact.title}/>}/>
          <Footer/>
        </Container>
      
      </Router>
    );
  }
}

export default App;

I tried to swap the render function out and use just element but it doesn't work.

Upvotes: 0

Views: 42

Answers (1)

Jomer Cabrera
Jomer Cabrera

Reputation: 30

The syntax of react-router is

<Routes>
    <Route></Route>
    <Route></Route>
</Routes>

You are using <Router> instead of <Routes>

Upvotes: 1

Related Questions