Question

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

我有一些工作的路由器代码，我认为可以略微清理，但到目前为止尝试这样做已经失败了。我在这方面的知识肯定存在一些差距。我已经通过类似的问题进行了分析，这些问题帮助我扩展了我的理解，但此时我还没有成功连接点。

以下代码似乎工作正常，但我对重复的＆＃34; / admin＆＃34;感到厌烦。所有管理路由的前缀。

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

然而，移动＆＃34;嵌套＆＃34;到子路线元素的路线不起作用。 JavaScript控制台会显示错误消息＆＃34;警告：您不应该使用和在同一路径中;将被忽略。＆＃34;

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

进一步扩展：在我到目前为止使用嵌套路由和入站“匹配”参数看到的所有示例中，它们已经如上所述实现，即const X = ({match}) => (...)。

但是有可能并且可能有用的是定义一个真正的React.Component子类，其中param匹配仍然可以通过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初学者...如果我做了一些愚蠢的事情，请告诉我。）

React Router Dom路由和子路由

1 个答案: