A Router may have only one child element

Question

Im try to learn react routing I created a project and in my index.js file i change my code as below

import React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import App from './components/App';
import Signin from './components/Signin';
import Signup from './components/Signup';

ReactDOM.render(
    <Router path="/">
        <Route path="/app" component={App} />
        <Route path="/signup" component={Signup} />                                                                    
        <Route path="/signin" component={Signin} />
    </Router>, document.getElementById('root')
);

but it gives an error like below

Module not found: Can't resolve 'react-router-dom' in 'D:\REACT\react-crud\src'

that means you need to install the `react-router-dom`, use this: `npm install --save react-router-dom`. Check this for more details: [react-router-dom](https://www.npmjs.com/package/react-router-dom) — Mayank Shukla, Feb 19 '18 at 08:41
now it gives an error like `A may have only one child element` — stewart, Feb 19 '18 at 08:45
@stewart wrap all the routes in a `div`, like this: `
/*all routes*/
` — Mayank Shukla, Feb 19 '18 at 08:48

Shubham Khatri · Accepted Answer · 2018-02-19T10:31:09.670

8

Install your package react-router-dom using npm install -S react-router-dom and also you can have one child for the Router. Wrap you Routes within a div/Switch whichever is suited to your needs

ReactDOM.render(
    <Router>
       <div>
        <Route path="/app" component={App} />
        <Route path="/signup" component={Signup} />                                                                    
        <Route path="/signin" component={Signin} />
       </div>
    </Router>, document.getElementById('root')
);

edited Feb 19 '18 at 10:31

answered Feb 19 '18 at 08:49

Shubham Khatri

270,417
55
406
400

is it still have browserHistory package in react-route – stewart Feb 19 '18 at 10:27
No, browserHistory is not present in the latest version, however you can use BrowserRouter which behaves the same way https://stackoverflow.com/questions/44452858/nesting-routes-in-react-router-v4/44453559#44453559 – Shubham Khatri Feb 19 '18 at 10:32
https://stackoverflow.com/questions/48877828/react-js-not-redirect-firebase-auth-user can u help me with this – stewart Feb 20 '18 at 04:32
Checking your question – Shubham Khatri Feb 20 '18 at 05:22

A Router may have only one child element

1 Answers1

Linked