react-router-dom gives error

Question

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 :

xiaofan2406 · Accepted Answer · 2017-03-27 11:57:34Z

2

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.

answered Mar 27, 2017 at 11:57

xiaofan2406

3,3105 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan D. · Accepted Answer · 2017-03-27 14:19:10Z

1

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.

edited Mar 27, 2017 at 14:19

Dan D.

75k15 gold badges111 silver badges129 bronze badges

answered Mar 27, 2017 at 12:00

Amit Sharma

412 bronze badges

Collectives™ on Stack Overflow

react-router-dom gives error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related