如何创建带有参数的嵌套路由器（React）答案

【问题标题】：How to create a nested router with parameters (React)如何创建带有参数的嵌套路由器（React）
【发布时间】：2021-08-19 08:08:25
【问题描述】：

我需要用 react-router-dom 更改组件，但我做不到。

我的页面带有参数 ex:12kb3v124j38727kguby

我去 /channel/12kb3v124j38727kguby => 显示频道页面（帐户标签）

我需要使用 Navigator 中的 Link 将 account 标签更改为 string/number/boolean 标签

如何解决？

App.js

function App() {
    return (
        <div className="App">
            <Router>
                <Header />
                <Switch>
                    <Route path="/" exact component={LandingPage} />
                    <Route path="/start" exact component={GetStarted} />
                    <Route path="/start/auth" exact component={Auth}/>
                    <Route path="/start/auth/signup" exact component={SignUp}/>
                    <Route path="/start/auth/signin" exact component={SignIn}/>
                    <Route path="/account" exact component={Account} />
                    <Route path="/account/new" exact component={CreateChannel} />
                    <Route path="/channel/:channel_id" exact component={Channel} />
                    <Route path="/plans" exact component={Plan} />
                    <Route path="*" component={NoMatch} />
                </Switch>
            </Router>
            <Loader />
            <Toast />
        </div>
    );
}

export default App;

Channel.jsx

function Channel(props) {
    let { path, url } = useRouteMatch();    
    return (
        <main className="relative top-14" style={{height: "300vh"}}>
            <Navigator />
            <Router>
                <Switch>
                    <Route exact path={path} component={Account} />
                    <Route exact path={`${path}/string`} component={String} />
                    <Route exact path={`${path}/number`} component={Number} />
                    <Route exact path={`${path}/boolean`} component={Boolean} />
                    <Route exact path={`${path}/docs`} component={Documentation} />
                </Switch>
            </Router>
        </main>
    );
}

Navigator.jsx

function Navigator(props) {
    let { url } = useRouteMatch();
    return (
        <div className="top-14 w-full text-white bg-purple-400">
            <ul className="flex overflow-x-auto">
                <li className="px-4 py-6 text-lg">
                    <Link to={`${url}`}>Account</Link>
                </li>
                <li className="px-4 py-6 text-lg">
                    <Link to={`${url}/string`}>String</Link>
                </li>
                <li className="px-4 py-6 text-lg">
                    <Link to={`${url}/number`}>Number</Link>
                </li>
                <li className="px-4 py-6 text-lg">
                    <Link to={`${url}/boolean`}>Boolean</Link>
                </li>
                <li className="px-4 py-6 text-lg">
                    <Link to={`${url}/docs`}>Documentation</Link>
                </li>
            </ul>
        </div>
    );
}

【问题讨论】：

尝试从<Route path="/channel/:channel_id" exact component={Channel} />中删除确切的内容
@RamanNikitsenka 谢谢...我也刚刚意识到 Channel.jsx 上的路由器也必须删除
我会将我的评论移至答案

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您需要从具有嵌套路由的 Route 组件中删除确切的道具。像这样：

<Route path="/channel/:channel_id" component={Channel} />

【讨论】：