reactjs - React Router Dom 路由和子路由

Question

这里是 React-router-dom/ReactJS 初学者。

我有一些工作路由器代码，我认为可以稍微清理一下，但迄今为止尝试这样做已经失败了。我在这方面的知识确实存在一些差距。我翻阅了类似的问题，这些问题帮助我扩展了我的理解，但目前我还没有成功地将这些点联系起来。

下面的代码似乎工作正常，但我对所有管理路由重复的“/admin”前缀感到厌烦。

<BrowserRouter>
    <div>
        <div className="nav-bar">
            <ul>
                <li><Link to="/admin">Home</Link></li>
                <li><Link to="/admin/content">Content</Link></li>
                ...
            </ul>
        </div>
        <div className="nav-content">
            <Route exact path="/admin" component={AdminHome}/>
            <Route path="/admin/content" component={AdminContent}/>
            ...
        </div>
    </div>
</BrowserRouter>

但是，将“嵌套”路由移动到子路由元素不起作用。 JavaScript 控制台会输出错误消息“警告:您不应在同一路由中使用 and；将被忽略。”

<Route exact path="/admin" component={AdminHome}>
    <Route path="/content" component={AdminContent}/>
    ...
</Route>

如有任何建议，我们将不胜感激。我已经阅读了许多 SO 答案，并找到了一些选项，例如，我可以使用 <Route path="/admin/:whatever" render={() => (...)}/> ，但目前看来这并不是一条正确的道路。

这样做的原因是，我最终需要树中更下方的路由参数，例如对于类似 /admin/content/:content_type/:identifier 的 URI ，理想情况下，我的 AdminContent 组件对其父路由匹配是不可知的。

如果我偏离了基地，请随时告诉我，如果您认为有任何文档可以给我带来启发，我很乐意阅读它。

再次干杯并感谢!

Answer 1

感谢上面的 Christopher 提供了一些优秀文档的链接。

根据链接的文档，以下更改现已启动并正在运行:

{/* top-level route declaration */}
<div className="nav-content">
    {/* note the removal of the exact property here */}
    <Route path="/admin" component={AdminRoutes}/>
</div>

{/* "sub-routes" (possible poor nomenclature) */}
const AdminRoutes = ({ match }) => (
    <div>
        {/* note the addition of the exact property here */}
        <Route exact path={match.url} component={AdminHome}/>
        <Route path={match.url + "/content"} component={AdminContent}/>
        <Route path={match.url + "/data-store"} component={AdminDataStore}/>
        <Route path={match.url + "/search"} component={AdminSearch}/>
        <Route path={match.url + "/communicate"} component={AdminCommunicate}/>
        <Route path={match.url + "/promote"} component={AdminPromote}/>
        <Route path={match.url + "/measure"} component={AdminMeasure}/>
        <Route path={match.url + "/experimental"} component={AdminExperimental}/>
    </div>
)

进一步扩展:在迄今为止我看到的使用嵌套路由和入站“match”参数的所有示例中，它们的实现方式如上所述，即 const X = ({match}) = > (...).

但是定义一个真正的 React.Component 子类是可能的，并且可能有用，其中参数匹配仍然可以通过 this.props 获得。

class Content extends React.Component {

    // usage example
    render() {

        // `match` is available via inbound props
        console.log(this.props.match);

        return (
            <p>Match is {this.props.match.url}</p>
        )
    }
}

我想重申一下，我是一个 ReactJS 初学者...如果我做了一些愚蠢的事情，请告诉我:)