CODEWITHSUNDEEP
javascriptreactjs
muhammad waqas
muhammad waqas

Reputation: 740

react-router-dom gives error

I have following implementation of "react-router-dom", but I am not able to get it working. can someone guide me what's the underlying issue.

App.jsx

import React from "react";
import Main from "../components/Main";
import Home from "../components/Home";
import { BrowserRouter, Match, Miss, Link } from 'react-router-dom';


  const App = () => (

   <BrowserRouter>
        <div>
            <Match exactly pattern="/" component={Main} />
            <Match pattern="/home" component={Home} />
        </div>
    </BrowserRouter>
  );

export default App;

Index.jsx

import React from "react";
import ReactDOM from "react-dom";
import Main from "./components/Main";
import Home from "./components/Home";

import Page from './components/Page';
import App from "./config/App";


ReactDOM.render( 
   <App/>,
    document.getElementById('app')
);

I get the following error :enter image description here

Upvotes: 0

Views: 429

Answers (2)

Amit Sharma
Amit Sharma

Reputation: 41

First of all, you should use Route instead of match.
Second, imports are case sensitive.
Third, match as per the doc you will get match object as prop.

Upvotes: 1

xiaofan2406
xiaofan2406

Reputation: 3310

Please refer to the docs of React Router v4

Match and Miss are from previous versions of react-router-v4.alpha

With the current stable release of v4. You should use Route instead of Match. Miss is not there anymore.

I think this should solve your problem.

Upvotes: 2

Related Questions