javascript - A Router may have only one child element - Stack Overflow

admin管理员组

文章数量:1336077

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 './ponents/App';
import Signin from './ponents/Signin';
import Signup from './ponents/Signup';

ReactDOM.render(
    <Router path="/">
        <Route path="/app" ponent={App} />
        <Route path="/signup" ponent={Signup} />                                                                    
        <Route path="/signin" ponent={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'

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 './ponents/App';
import Signin from './ponents/Signin';
import Signup from './ponents/Signup';

ReactDOM.render(
    <Router path="/">
        <Route path="/app" ponent={App} />
        <Route path="/signup" ponent={Signup} />                                                                    
        <Route path="/signin" ponent={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'

• javascript
• reactjs

Share Improve this question Follow edited Feb 20, 2018 at 12:41 Shubham Khatri 282k5858 gold badges431431 silver badges411411 bronze badges asked Feb 19, 2018 at 8:39 stewartstewart 4722 silver badges88 bronze badges 5

• 1 Have you installed react-router-dom? – Agney Commented Feb 19, 2018 at 8:40
• 1 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 – Mayank Shukla Commented Feb 19, 2018 at 8:41
• now it gives an error like A <Router> may have only one child element – stewart Commented Feb 19, 2018 at 8:45
• 1 @stewart wrap all the routes in a div, like this: <Router><div> /*all routes*/ </div></Router> – Mayank Shukla Commented Feb 19, 2018 at 8:48
• Just put all your routes between <div> </div> or <React.Fragment></React.Fragment> – mix-fGt Commented Aug 17, 2018 at 9:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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" ponent={App} />
        <Route path="/signup" ponent={Signup} />                                                                    
        <Route path="/signin" ponent={Signin} />
       </div>
    </Router>, document.getElementById('root')
);

本文标签： javascriptA Router may have only one child elementStack Overflow