如何创建带参数的嵌套路由器(React)

Question

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

我有一个页面参数ex:12kb3v124j38727kguby

我去/channel/12kb3v124j38727kguby =>显示频道账户页面(选项卡)

我需要更改帐户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>
);
}

Answer 1

你需要从有嵌套路由的Route组件中移除确切的prop。这样的:

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