React-route-dom 更新 url 但不渲染组件答案

【问题标题】：React-route-dom updates url but doesn't render componentReact-route-dom 更新 url 但不渲染组件
【发布时间】：2020-02-21 19:26:12
【问题描述】：

我有一个 react material-ui react 组件，我想通过更改 url 来渲染另一个 react 组件。 Create Jobs 是另一个文件中的一个组件。

我在 SO 上查看了很多关于此的其他问题，但没有一个能解决我的问题。

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}
        />
    )}
    </>
    );
}

列表作业正确呈现，但当我按下创建按钮时，URL 更改为“localhost:3000/Jobs/Create”，但 CreateJobs 组件未呈现。当我单击 url 并按 Enter 键时，会呈现正确的组件。

【问题讨论】：

在路由器中使用 exact 属性作为父 url 组件路由以确保它不会重定向第一个获取路由。你可以签入 React 路由器 docs

标签： reactjs material-ui react-router-dom

【解决方案1】：

只需交换您的路由，因为 React 路由器将尝试按此顺序匹配，即 /Jobs/Create 匹配您的 /Jobs 路由：

<Router>
    <Switch>
      <Route path = '/Jobs/Create' component = {ListJobs}/>
      <Route path ='/Jobs' component ={CreateJobs}/>
    </Switch>
</Router>

【讨论】：

【解决方案2】：

尝试添加确切的工作之一：

<Router>
    <Switch>
      <Route exact path = '/Jobs' component = {ListJobs}/>
      <Route path ='/Jobs/Create' component ={CreateJobs}/>
    </Switch>
  </Router>

【讨论】：

成功了，谢谢。我以为我已经尝试过了，但由于某种原因，它现在可以工作，而之前却没有