Javascript 反应路由器4如何嵌套路由/管理和/

我对嵌套路由有问题。 在普通的网站上，除了/admin页面上，我还有其他的URL，我有不同的设计和html

我准备了这个路由示例，但是在页面刷新后，页面会变白，没有任何错误

我能要求咨询一下吗？我做错了什么

应用程序组件

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>
    );
}

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>
    )
}

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

            </div>
        </BrowserRouter>
    )
}

类应用程序扩展组件{
render（）{
返回(
(
)} />
(
)} />
);
}

}

页面组件

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>
    );
}

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>
    )
}

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

            </div>
        </BrowserRouter>
    )
}

类页扩展React.Component{
render（）{
返回(
(
)} />
(
)} />
(
)} />
(
)} />
(
)} />
)
}

}

管理组件

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>
    );
}

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>
    )
}

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

            </div>
        </BrowserRouter>
    )
}

类管理扩展了React.Component{
render（）{
返回(
(
)} />
)
}

---

}

使用React路由器的React应用程序应该只有一个已定义的实例，如文档中所述：

所有路由器组件的通用低级接口。典型的 应用程序将使用其中一个高级路由器

您得到的错误是因为您正在页面和管理组件中定义其他路由器（在您的情况下，有多个BrowserRouter实例）

此外，您的一些路线不明确，例如：

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

(
)} />

以及：

(
)} />

---

一个路由说root（“/”）应该导航到页面组件，另一个路由说root应该导航到主组件，因此存在冲突。确保路线是唯一的。

我改变了处理这种情况的方法，但不起作用。Url/admin加载页眉和页脚组件，尽管他不应该加载，并且不应该加载组件仪表板

有什么建议吗

<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>

(
)} />
(
)} />
(
)} />
(
)} />
(
)} />
(
)} />

管理组件：

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

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

类管理扩展了React.Component{
render（）{
log（“ADMIN:，this.props”）；
返回(
管理
{this.props.children}
)
}
}

页面组件：

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

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

类页扩展React.Component{
render（）{
日志（“页面：”，this.props）；
返回(
{this.props.children}
)
}
}

可以，但如何避免？在以前版本的路由器中，它更容易：/react router 4中有关嵌套路由的问题和答案，请参见此处，这将帮助您解决问题。由于您的代码目前存在多个路由器的问题，而且您有两条路径的根路径（即/）也可能导致代码出错。我认为主要问题是如何隐藏和in/admin操作