Reactjs 使用React路由器显示详细信息

我有一个路由器来显示各个类的详细信息。该代码在我的本地计算机URL上用于详细视图，但在我将代码部署到web服务器时，它有一个404错误。如何解决这个问题？谢谢下面是我的代码：

Routing.js

 const Routing = () => (
    <Switch>
      <Route exact path='/course/:CLASS_NBR' component={Bookmark} />
      <Route  path="/" component={App} />
    </Switch>
     </>
    );
    export default Routing;

const路由=（）=>(
);
导出默认路由；

CourseDetail.js

...
 <Link  to={{ pathname: '/course/'+course.CLASS_NBR

            }}
            target="_blank"
                        key={course.ID}>
                        View this course
                    </Link>

。。。
查看本课程

Bookmark.js

 class Bookmark extends Component {
        state={
           CLASS_NBR: this.props.match.params.id, 
          course:[]
        };

        componentDidMount(){
           const {CLASS_NBR} = this.props.match.params.CLASS_NBR ;
            this.runSearch();
         }

         runSearch=async()=>{

           const response= await axios.get('url/api/get',
           {
              params: {
              CLASS_NBR: this.props.match.params.CLASS_NBR
              }
           })
           this.setState({course: response.data});
         }
      render(){
          if (!this.state.course){
              return <div>No record found</div>
          }

          const course =this.state.course;

          return (

             <div>
             <h4>
              {course["SUBJECT"]} {course["CATALOG_NBR"]} - {course["COURSE_DESCR"]}  
              </h4>

            </div>

      );
      }   
      };

    export default Bookmark;

类书签扩展组件{
陈述={
类别编号：this.props.match.params.id，
课程：[]
};
componentDidMount（）{
const{CLASS_NBR}=this.props.match.params.CLASS_NBR；
这是runSearch（）；
}
runSearch=async（）=>{
const response=wait axios.get（'url/api/get'，
{
参数：{
类别编号：this.props.match.params.CLASS\u编号
}
})
this.setState（{course:response.data}）；
}
render（）{
如果（！this.state.course）{
返回未找到任何记录
}
const course=this.state.course；
返回(
{course[“SUBJECT”]}{course[“CATALOG_NBR”]}-{course[“course_DESCR”]}
);
}   
};
导出默认书签；

React作为单页应用程序运行，因此您需要将所有请求路由到index.html

将其添加到

.htaccess

文件中

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写cond%{REQUEST_FILENAME}-L
重写规则/index.html[L]

---

作为奖励，如果你想构建404页面，你可以配置它。

我通过使用哈希路由找到了解决方案。请看这篇文章

这可能是Web服务器的问题。您的Web服务器需要为所有URL提供相同的索引页。例如，请参见react文档中的说明。谢谢。但是我们有Windows IIS web服务器。如何做到这一点？