how to react router v4 in sub?

Question

i want to nest router but is not working

app.js

ReactDOM.render(
    <Router>

           <div className="app">
                <Route exact path="/" component={Home}/>
                <Route path="/rocket" component={Example}/>

           </div>
   </Router>,
    document.getElementById('app')
);

Example.js

class Example extends React.Component {
    render() {
        return (
            <div>
   <Switch>
     <Route path={'/'} component={A}/>
      <Route path={'/b'} component={B}/>
    )
   }
 }

localhost:3000/rocket/b is not working, not found so i correct, but is not working.. i don't know

The path property is expecting the entire path e.g. `/rocket/b` instead of just `/b`. Nesting one component with routes inside another component with routes will not have any effect on the path value. — ryandrewjohnson, Jan 23 '19 at 02:14
@ryandrewjohnson i did it, but is not working, router is browserrouter.. — kekeee, Jan 23 '19 at 04:13
Is it just me or your Component don't have a closing tag? If it's fine please edit to your final code so we can check what's the error — Bon Andre Opina, Jan 23 '19 at 04:18
@kekeee If you can provide a working code snippet that would help a lot in tracking down the issue. Also like the one comment mentioned Switch needs a closing tag, so it's hard to provide an answer with an incomplete snippet. — ryandrewjohnson, Jan 23 '19 at 14:32

score 0 · Answer 1 · answered Jan 24 '19 at 10:45

The problem may be on the server side. Tell me what you use to build the app.

The dev server should serve the generated index.html for every path, whether it's '/' or '/b'. Otherwise, when the browser hits /b, it looks for a file named b.html

it looks like dev server with react router dom v4

example for webpack

devServer: {
  historyApiFallback: true
}

how to react router v4 in sub?

1 Answers1