react router v4 "/" exact path not working with cordova

Question

Try to do this in IntelXDK with cordova plugin but it doesn't display anything

const app = document.getElementById('app');

const Index = () => (
    <Router>
      <div>
        <Switch>
            <Route exact path="/" component={Layout}/>
            <Route path="/about" component={First}/>
            <Route path="/topics" component={Second}/>
        </Switch>
      </div>
    </Router>

);

const Layout = () => (
    <div>
        <h1>layout</h1>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
        </ul>
    </div>
);

const First = () => (
    <div>
        <h1>first</h1>
    </div>
);

const Second = () => (
    <div>
        <h1>second</h1>
    </div>
);


ReactDOM.render(<Index/>, app);

When I delete the exact word and not using <Switch> tag it works but it renders 2 components (Layout and First or Layout and Second).

I want to render only 1 component, can someone help me with this problem?

Answer 1

You can try to remove the exact atteibute and put the / route at the end of the 3 routes. Then it will just render if it's not the other ones. But it will also render if it's something else, so I am not sure if you want to avoid that.

Best regards