我正在练习与反应路由器,并需要有一个:id
参数。它与url中的an匹配,例如/edit/2
,但不与仅有/edit
的基本大小写匹配。
主应用程序路由器文件
import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import landingPage from '../components/landingPage';
import editPage from '../components/editPage';
import createPage from '../components/createPage';
import helpPage from '../components/helpPage';
import notFoundPage from '../components/notFoundPage';
import Header from '../components/header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route exact={true} path="/" component={landingPage}/>
<Route path="/create" component={createPage}/>
<Route exact={false} path="/edit/:id" component={editPage}/>
<Route path="/help" component={helpPage}/>
<Route component={notFoundPage}/>
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
editPage代码
import React from 'react';
const editPage = (props) => {
console.log(props)
return (
<div>Edit Page</div>
);
}
export default editPage;
发布于 2018-06-07 06:43:12
如果您使用的是React Router >= v4,则可以通过在参数名称后添加一个?
来执行make a parameter optional:
<Route exact={false} path="/edit/:id?" component={editPage}/>
https://stackoverflow.com/questions/50730572
复制相似问题