React 嵌套路由使用子组件渲染父组件

Question

我正在学习 React（来自 ASP.NET）。当我转到 '/employee' 时，它将显示员工列表 table。但是当我转到 '/employee/create' 时，它会同时显示 table 和创建表单。如何在我 '/employee/create' 时仅显示创建员工表单？

export default class App extends Component {
static displayName = App.name;

render() {
    return (
        <Layout>
            <Route exact path='/' component={Home} />
            <Route path='/counter' component={Counter} />
            <AuthorizeRoute path='/fetch-data' component={FetchData} />
            <Route exact path='/employee' component={EmployeeIndex} />
            <Route path='/employee/create' component={EmployeeCreate} />
            <Route path='/employee/details/:id' component={EmployeeDetails} />
            
        </Layout>
    );
 }
}

Answer 1

这是我在我的应用程序中使用的内容。为所有页面制作单独的组件并在 src 下的 App.js 中导入。使用 state 和 props 来存储数据和创建 ID。安装 npm i react-router-dom 以访问 react 路由。

import { Switch, Route, Redirect } from "react-router-dom";
<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/employee" component={Employee} />
    <Route exact path="/createEmployee" component={Create} />
    <Route exact path="/employeeDetails" component={Details} />
    <Redirect to = "/" />   
</Switch>

主页 - Home.js
员工列表 table - Employee.js
创建员工 - Create.js
转到员工详细信息 - Details.js
重定向到 - 如果未输入准确的 URL，将重定向到主页。

Answer 2

为此，您需要在 Routes 周围添加 <Switch>:

import { Route, Switch } from "react-router";


<Switch>
   <Route exact path='/' component={Home} />
   <Route path='/counter' component={Counter} />
   <AuthorizeRoute path='/fetch-data' component={FetchData} />
   <Route exact path='/employee' component={EmployeeIndex} />
   <Route path='/employee/create' component={EmployeeCreate} />
   <Route path='/employee/details/:id' component={EmployeeDetails} />
</Switch>

它的工作方式与普通的 `switch-case 一样，只会呈现您的路由中的第一个匹配路径。

没有 <Switch> 它将呈现 ALL 匹配的路由。

React 嵌套路由使用子组件渲染父组件

React nested route render the parent component with the child component

javascript

routes

reactjs

react-router