React-router-dom -Same route issue

Question

I am new in the react js framework and I am current doing a navigation but I've encounter a problem regarding my routes. Here's my components from newly installed react js.

Index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';


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

App.js

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {
  render() {
    return (
      <div>
        <Routes/>
      </div>
    );
  }
}
export default App;

src/routes/index.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Root from '../components/Root';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';

export default() =>(
<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Root}>
            <Route exact path="/home" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/contact" component={Contact}/>
        </Route>
    </Switch>
</BrowserRouter>
)

src/components/Root.js

import React, { Component } from 'react';

import Header from './Header';

class Root extends Component {
  render() {
    console.log(this.props)
    return (
        <div>
            <div>
                <Header/>
            </div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
  }
}
export default Root;

src/components/Header.js

import React, { Component } from 'react';
import {Navbar} from 'reactstrap';

class Header extends Component {

  render() {
    return (
        <div>
            <Navbar color="light" light expand="md">
                //navbar html code here
            </Navbar>
        </div>  
    );
  }
}
export default Header;

index.js:2178 Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

this is my problem here.

score 1 · Accepted Answer · answered Aug 08 '18 at 11:36

I think your warning is missing some information as SO seems to have removed the XML like tags.

Looking at the code though, I am pretty sure the warning is supposed to say:

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

The problem is you have put some of your Routes as "children" of another route. You don't need to do that.

<Switch>
    <Route exact path="/" component={Root}>
        <Route exact path="/home" component={Home}/>
        <Route exact path="/about" component={About}/>
        <Route exact path="/contact" component={Contact}/>
    </Route> // This is the problem, you don't need to enclose this.
</Switch>

You don't need to enclose the Routes as they are all exact and will always match the component with the path.

<Switch>
    <Route exact path="/" component={Root} />
    <Route exact path="/home" component={Home}/>
    <Route exact path="/about" component={About}/>
    <Route exact path="/contact" component={Contact}/>
</Switch>

Hi Dubes, the warning is solve but when i click the nav. for example the about page. the header navigation is missing. Do i missed something on my root js? — Jay Ar Viluan, Aug 08 '18 at 11:49
your answer is correct but when I clicked my about link.. my navigation is missing. but the content of about is rendered. — Jay Ar Viluan, Aug 08 '18 at 11:54
That could be a problem with the "nav" component or the mechanism you use to navigate. This could also be a problem with the browser you are using. Can you ask a new question and provide these details? — dubes, Aug 08 '18 at 12:21

score 0 · Answer 2 · answered Aug 08 '18 at 11:35

0

This is always work for me

Nested Routes in React Router v4

answered Aug 08 '18 at 11:35

Raj Jaril

260
1
13

I don't think "exact" is causing the problem that the OP is facing. From the official documentation: https://reacttraining.com/react-router/core/api/Route/exact-bool it is just an instruction as to whether match should be exact or relaxed. – dubes Aug 08 '18 at 11:41
Hi Raj, How to render the content of about and product? – Jay Ar Viluan Aug 08 '18 at 11:41
@JayArViluan for that i had used Product – Raj Jaril Aug 08 '18 at 11:43
@RajJaril dubes answer is correct but when I clicked my about link.. my navigation is missing. but the content of about is rendered. – Jay Ar Viluan Aug 08 '18 at 11:53

React-router-dom -Same route issue

2 Answers2