CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
user12159191
user12159191

Reputation:

React Router Help: component appears when I would expect it not to

I am trying a simple routing with React. My understanding is that with the below, the Navi component being routed should only appear in the root url and not appear in any other url, however this is not the case - no matter the url, the component always appears. Could someone explain what I am missing?

import React, { Component } from "react";
import Home from "./Home";
import Navi from "./Navi";
import Welcome from "./Welcome";
import logo from "./logo.svg";
import "./App.css";
import { Route, BrowserRouter as Router } from "react-router-dom";

class App extends Component {
  constructor() {
    super();
    this.state = { user: "kungpow" };
  }
  render() {
    return (
      <div>
        <Router>
          <Navi user={this.state.user} />
          <Route exact link="/" Component={Navi} />
        </Router>

        <Home user={this.state.user} />
        <Welcome user={this.state.user} />
      </div>
    );
  }
}

export default App;

Upvotes: 0

Views: 33

Answers (1)

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

Your are missing path prop. Replace link with path prop.

<Router>
    <Route exact path="/" render={() => <Navi user={this.state.user} />} />
</Router>

Upvotes: 1

Related Questions