React-route-dom обновляет URL, но не отображает компонент - PullRequest
Новая
       27

React-route-dom обновляет URL, но не отображает компонент

0 голосов
/ 21 февраля 2020

У меня есть реактивный компонент-пользовательский интерфейс, который я хочу использовать для рендеринга другого реактивного компонента путем изменения URL. Создание заданий является компонентом в другом файле.

Я рассмотрел многие другие вопросы по этому поводу в 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 и нажимаю ввод, правильный компонент рендерится.

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Просто поменяйте местами ваши маршруты, так как маршрутизатор React будет пытаться найти соответствие в этой последовательности, т.е. /Jobs/Create соответствует вашему /Jobs маршруту: 

<Router>
    <Switch>
      <Route path = '/Jobs/Create' component = {ListJobs}/>
      <Route path ='/Jobs' component ={CreateJobs}/>
    </Switch>
</Router>
0 голосов
/ 21 февраля 2020

попробуйте добавить точное к заданию один: 

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