React router 4 如何嵌套路由 /admin 和 /

Posted 2023-02-21

【中文标题】React router 4 如何嵌套路由 /admin 和 /

【英文标题】：React router 4 how to nested routes /admin and /

【发布时间】：2018-02-13 02:38:47

【问题描述】：

嵌套路由有问题。 在普通网站上，除了 / 管理页面，我还有其他 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>
    )

【参考方案1】：

您使用 React-Router 的 React 应用程序应该只定义一个 Router 的实例，如文档中所述：

所有路由器组件的通用低级接口。通常 应用将改用其中一个高级路由器

您遇到的错误是因为您在页面和管理组件中定义了额外的路由器（在您的情况下，有多个 BrowserRouter 实例）。

你的一些路线也是模棱两可的，例如

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

和：

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

一个 Route 说 root ('/') 应该导航到 Page 组件，另一个说 root 应该导航到 Home 组件，因此存在冲突。确保路线是唯一的。

【讨论】：

好的，不然怎么办？在以前版本的路由器中，它更容易：/

有关 react-router 4 中嵌套路由的问题和答案，请参见此处，这应该可以帮助您解决问题***.com/a/43311025/203371。由于您的代码目前是，您有多个路由器的问题，而且您有两条路径的确切路径为根（即。/），这可能导致代码也出错。

我认为主要问题是如何在 /admin 位置隐藏

【参考方案2】：

我改变了对这种情况的处理方法，但不起作用。 Url /admin 加载 Header 和 Footer 组件虽然他不应该并且组件 Dashboard 不加载。

有什么建议吗？

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