React Router 只显示一个 Switch 组件，而在调用其他组件时什么也不做答案

【问题标题】：React Router is showing only one of the Switch components and does nothing when others are calledReact Router 只显示一个 Switch 组件，而在调用其他组件时什么也不做
【发布时间】：2021-04-11 17:15:11
【问题描述】：

我的路由组件如下所示：

import { Link, Route, Switch } from 'react-router-dom';
import Nav from 'react-bootstrap/Nav'

import AllWorkouts from './Workout/AllWorkouts/AllWorkouts';
import WorkoutCreate from './Workout/WorkoutCreate/WorkoutCreate';
import WorkoutDetails from './Workout/WorkoutDetails/WorkoutDetails';
import WorkoutEdit from './Workout/WorkoutEdit/WorkoutEdit';    

const Main = () => {
    return (  
            <Switch>    
                <Route path="/workout/:id/edit" componnet={WorkoutEdit} />
                <Route path="/workout/:id/details" componnet={WorkoutDetails} />
                <Route path="/workout/create" componnet={WorkoutCreate} />
                <Route path="/workout/all" component={AllWorkouts} />    
            </Switch>
    );
}

export default Main;

我在 index.js 中包含了 BrowserRouter，唯一匹配的路由是 path="/workout/all"。我无法使用 Link 或直接在 URL 中调用任何其他路由。当我调用 /workout/all 时，我可以看到具有所有其他路由的组件没有任何反应。谢谢！

下面是另一个组件，我没有看到任何拼写错误：

import { Link, Route, Switch } from 'react-router-dom';
import Button from 'react-bootstrap/Button'

const AllWorkouts = () => {
    return (
        <div>
            <Link to="/workout/create">
                <Button variant="outline-primary">Create new workout</Button>{' '}
            </Link>
            <h1>Hello from AllWorkouts</h1>            
        </div>
    );
}
export default AllWorkouts;

【问题讨论】：

标签： react-router react-router-dom

【解决方案1】：

您在其他路线中拼错了组件

mport { Link, Route, Switch } from 'react-router-dom';
import Nav from 'react-bootstrap/Nav'

import AllWorkouts from './Workout/AllWorkouts/AllWorkouts';
import WorkoutCreate from './Workout/WorkoutCreate/WorkoutCreate';
import WorkoutDetails from './Workout/WorkoutDetails/WorkoutDetails';
import WorkoutEdit from './Workout/WorkoutEdit/WorkoutEdit';    

const Main = () => {
    return (  
            <Switch>    
                <Route path="/workout/:id/edit" component={WorkoutEdit} />
                <Route path="/workout/:id/details" component={WorkoutDetails} />
                <Route path="/workout/create" component={WorkoutCreate} />
                <Route path="/workout/all" component={AllWorkouts} />    
            </Switch>
    );
}

export default Main;

【讨论】：