Reactjs 反应路由dom更新url,但不';t渲染组件
我有一个react material ui react组件,我想通过更改url来使用它呈现另一个react组件。 创建作业是另一个文件中的组件 我已经看了很多关于这方面的其他问题,但没有一个解决了我的问题Reactjs 反应路由dom更新url,但不';t渲染组件,reactjs,material-ui,react-router-dom,Reactjs,Material Ui,React Router Dom,我有一个react material ui react组件,我想通过更改url来使用它呈现另一个react组件。 创建作业是另一个文件中的组件 我已经看了很多关于这方面的其他问题,但没有一个解决了我的问题 import { BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom'; import CreateJobs from './CreateJobs' import MuiTable from './Compo
import { BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom';
import CreateJobs from './CreateJobs'
import MuiTable from './Components/MuiTable'
import CircularProgress from '@material-ui/core/CircularProgress';
import { Grid } from "@material-ui/core";
export default function ListRunConfigs_urls(){
return(
<Router>
<Switch>
<Route path = '/Jobs' component = {ListJobs}/>
<Route path ='/Jobs/Create' component ={CreateJobs}/>
</Switch>
</Router>
)
}
...
function ListJobs(props) {
...
const createButton =
<div style={{display: 'flex', justifyContent:'center', alignItems:'center'}}>
<Button
component={Link} to='/Jobs/Create'
variant="contained"
color="primary">
Create Jobs
</Button>
</div>
return(
<> {loading ? (
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: '90vh' }}
>
<CircularProgress size="10vh" />
</Grid>
) : (
<MuiTable
model="Jobs"
createButton={createButton}
/>
)}
</>
);
}
从'react Router dom'导入{browser Router as Router,Link,Switch,Route};
从“/CreateJobs”导入CreateJobs
从“./Components/MuiTable”导入MuiTable
从“@material ui/core/CircularProgress”导入CircularProgress;
从“@material ui/core”导入{Grid}”;
导出默认函数ListRunConfigs_URL(){
返回(
)
}
...
函数列表作业(道具){
...
常量createButton=
创造就业机会
返回(
{加载(
) : (
)}
);
}
列表作业正确呈现,但当我按下创建按钮时,url变为“localhost:3000/jobs/create”,但
CreateJobs
组件不呈现。当我单击url并按enter键时,将显示正确的组件。尝试将exact添加到作业中:
<Router>
<Switch>
<Route exact path = '/Jobs' component = {ListJobs}/>
<Route path ='/Jobs/Create' component ={CreateJobs}/>
</Switch>
</Router>
只需交换路由,因为React router将尝试按此顺序匹配,即
/Jobs/Create
匹配您的/Jobs
路由:
在路由器中,为父url组件路由使用精确的
属性,以确保它不会重定向第一个获取路由。你可以办理登机手续,谢谢。我想我已经试过了,但由于某种原因,它现在起作用了,以前没有