React router 4 how to nested routes /admin and /

Question

I have problem with nested routing. On the normal site I have other urls than on the / admin page and i have different design and html.

I prepared this sample routing but after the page refreshes, the page gets white without any error.

Can I ask for a consultation what did I do wrong?

APP COMPONENT

class App extends Component {
render() {
    return (
        <BrowserRouter>
            <div className="container">
                <Route exact path="/" render={(props) => (
                    <Page {...props} data={data} />
                )} />
                <Route exact path="/admin" render={(props) => (
                    <Admin {...props} data={data} />
                )} />
            </div>
        </BrowserRouter>
    );
}

}

PAGE COMPONENT

class Page extends React.Component {
render() {
    return (
        <BrowserRouter>
            <div>
                <Header />

                    <Route exact path="/" render={(props) => (
                        <Home {...props} videosJson={this.props.data} />
                    )} />

                    <Route path="/about" component={ About } />

                    <Route exact path="/video" render={(props) => (
                        <VideoGallery {...props} videosJson={this.props.data} />
                    )} />

                    <Route path="/video/:id" render={(props) => (
                        <VideoPage {...props} videosJson={this.props.data} />
                    )} />

                    <Route exact path="/photo" render={(props) => (
                        <PhotoGallery {...props} videosJson={this.props.data} />
                    )} />

                    <Route path="/photo/:id" render={(props) => (
                        <PhotoPage {...props} videosJson={this.props.data} />
                    )} />

                    <Route path="/contact" component={ Contact } />

                <Footer />
            </div>
        </BrowserRouter>
    )
}

}

ADMIN COMPONENT

class Admin extends React.Component {
render() {
    return (
       <BrowserRouter>
            <div>
                    <Route exact path="/admin" render={(props) => (
                        <Dashboard {...props} />
                    )} />

            </div>
        </BrowserRouter>
    )
}

}

Ben Smith · Answer 1 · 2017-09-13T10:08:24.250

2

Your React application which uses React-Router should only have one instance of a Router defined, as stated in the documentation:

The common low-level interface for all router components. Typically apps will use one of the high-level routers instead

The error you are getting is because you are defining additional routers (in your case there are multiple instances of BrowserRouter) in your Page and Admin components.

Also some of your Routes are ambiguous e.g.

<Route exact path="/" render={(props) => (
 <Page {...props} data={data} />
)} />

and:

<Route exact path="/" render={(props) => (
 <Home {...props} videosJson={this.props.data} />
)} />

One Route says that root ('/') should navigate to the Page component, the other says that root should navigate to the Home component, hence there is a conflict. Make sure the routes are unique.

edited Sep 13 '17 at 10:08

answered Sep 04 '17 at 21:35

Ben Smith

19,589
6
65
93

ok but how to do otherwise? In the previous version of the router it was easier :/ – Olo Sep 04 '17 at 21:41
See here for a question and answer regarding nested routing in react-router 4 which should help you out https://stackoverflow.com/a/43311025/203371. As your code is at the moment, you have a problem with multiple routers, and also you have two routes with an exact path of root (ie. /) which is probably causing the code to also error. – Ben Smith Sep 04 '17 at 21:47
i think master problem is how to hide
and
in /admin loaction
– Olo Sep 05 '17 at 17:32

score 0 · Answer 2 · edited Sep 13 '17 at 07:51

I change my approach to this situation but dont work. Url /admin load Header and Footer component although he should not and component Dashboard not load.

Any sugestion?

<BrowserRouter>
            <div className="container">

                    <Page>
                        <Header />

                            <Route exact path="/" render={(props) => (
                                <Home {...props} videosJson={data} />
                            )} />

                            <Route path="/about" component={ About } />

                            <Route exact path="/video" render={(props) => (
                                <VideoGallery {...props} videosJson={data} />
                            )} />

                            <Route path="/video/:id" render={(props) => (
                                <VideoPage {...props} videosJson={data} />
                            )} />

                            <Route exact path="/photo" render={(props) => (
                                <PhotoGallery {...props} videosJson={data} />
                            )} />

                            <Route path="/photo/:id" render={(props) => (
                                <PhotoPage {...props} videosJson={data} />
                            )} />

                            <Route path="/contact" component={ Contact } />

                        <Footer />
                    </Page>

                    <Admin>
                        <Route exact path="/admin" render={(props) => (
                            <Dashboard />
                        )} />
                    </Admin>

            </div>
        </BrowserRouter>

Admin Component:

class Admin extends React.Component {
  render() {
      console.log("ADMIN:", this.props);
      return (
        <div className="row">
            <h1>ADMIN</h1>
            {this.props.children}
        </div>
      )
   }
}

Page Component:

class Page extends React.Component {
   render() {
      console.log("PAGE:", this.props);
      return (
         <div>
            {this.props.children}
        </div>
      )
   }
}

React router 4 how to nested routes /admin and /

2 Answers2