React Router 4同文件夹下多视图路由配置问题求助

嘿，我看你是要搞定React里从Logging页面点击按钮跳转到LoggingDetail页面的功能，结合你的项目结构和现有代码，我给你梳理一下完整的实现步骤：

1. 先补全App组件的路由配置 #

首先得把你的路由配置补全，确保详情页的路由路径正确设置。这里我给你两种选项：一种是带动态参数的路由（方便传递详情ID），另一种是固定路径的路由，你可以根据需求选：

import React, { Component } from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import Reboot from '@material-ui/core/Reboot';
import Logging from './views/logging'; // 对应/views/logging/index.js
// 注意这里的路径要匹配你的实际文件名，你说的是loggingdetails.js，所以路径是这个
import LoggingDetail from './views/logging/loggingdetails';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Reboot />
        <Router history={this.props.history}>
          <div id="router">
            <Switch>
              {/* 配置Logging列表页的路由，exact确保只有匹配/logging时才渲染 */}
              <Route exact path="/logging" component={Logging} />
              {/* 方案一：动态路由，适合需要传递详情ID的场景 */}
              <Route path="/logging/:detailId" component={LoggingDetail} />
              {/* 方案二：固定路径路由，如果不需要传递参数可以用这个 */}
              {/* <Route path="/logging/detail" component={LoggingDetail} /> */}
            </Switch>
          </div>
        </Router>
      </MuiThemeProvider>
    );
  }
}

export default App;

2. 在Logging组件里添加按钮跳转逻辑 #

接下来要在/views/logging/index.js里给按钮加上点击跳转的逻辑，分两种组件类型来处理：

如果你的Logging是函数组件（推荐写法）

用useNavigate钩子就能轻松实现跳转：

import React from 'react';
import { useNavigate } from 'react-router-dom';
import Button from '@material-ui/core/Button';

const Logging = () => {
  const navigate = useNavigate();

  const goToDetail = () => {
    // 如果用动态路由，这里可以传实际的详情ID，比如从列表项里取
    navigate('/logging/123');
    // 如果用固定路径，就写navigate('/logging/detail');
  };

  return (
    <div>
      <Button 
        variant="contained" 
        color="primary" 
        onClick={goToDetail}
      >
        查看详情
      </Button>
    </div>
  );
};

export default Logging;

如果你的Logging是类组件

那得用withRouter高阶组件把组件包起来，这样才能拿到路由相关的props：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Logging extends Component {
  goToDetail = () => {
    // 动态路由跳转，带ID参数
    this.props.history.push('/logging/123');
    // 固定路径跳转的话就写this.props.history.push('/logging/detail');
  };

  render() {
    return (
      <div>
        <Button 
          variant="contained" 
          color="primary" 
          onClick={this.goToDetail}
        >
          查看详情
        </Button>
      </div>
    );
  }
}

// 一定要用withRouter包裹，不然拿不到history对象
export default withRouter(Logging);

3. 额外小技巧：在详情页获取参数 #

如果用了动态路由，你可能需要在LoggingDetail里拿到传递的detailId，这里也给你两种组件的写法：

// 函数组件用useParams钩子
import React from 'react';
import { useParams } from 'react-router-dom';

const LoggingDetail = () => {
  const { detailId } = useParams();
  return <div>当前详情ID：{detailId}</div>;
};

export default LoggingDetail;

// 类组件用this.props.match.params
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class LoggingDetail extends Component {
  render() {
    const { detailId } = this.props.match.params;
    return <div>当前详情ID：{detailId}</div>;
  }
}

export default withRouter(LoggingDetail);

最后提醒一下：一定要确保你的import路径和实际文件名完全匹配，大小写也不能错哦！

内容的提问来源于stack exchange，提问作者Marcelo