React 路由器无法处理路由并返回不匹配的警告

Posted 2023-02-22

【中文标题】React 路由器无法处理路由并返回不匹配的警告

【英文标题】：React router is not able to handle routes and give back warning of did not match

【发布时间】：2017-05-04 17:32:09

【问题描述】：

我有一个示例项目，只是用来玩 react 并了解它是如何工作的。

对于开发环境，我使用 webpack 开发服务器，但这对于实际部署来说是不够的。显然，当涉及到实际部署时，似乎没有好的解决方案，我唯一能找到的就是使用 heroku，我不能在我的域下拥有我的应用程序，应该以 heroku 结尾，这在现实世界的开发中是不可接受的（请更正如果我错了，因为我不确定部署我的网络应用程序的最佳方式是什么）。

要部署我的应用程序，我能想到的唯一方法是使用 tomcat。所以我复制了我项目的bundle.js和index.html文件，放到eclipse IDE的WebContent中。以下是index.js文件：

import render from "react-dom";
import React from "react";
import Router, Route, browserHistory, useRouterHistory, IndexRoute from     "react-router";
import  createHistory  from 'history';
import Provider from "react-redux";
import Home from "./container/Home";
import Bridge from "./router-bridge/Bridge";
import T from "./components/T";
import store from "./store";



class Tj extends React.Component 

   render() 
        const history = useRouterHistory(createHistory)(
       basename: '/test'
       );
    return (
        <Router history=history>
            <Route path="/" component=Bridge >
                <IndexRoute component=Home />
                <Route path="user" component=T />
                <Route path="home" component=Home />
            </Route>
            <Route path="/test/" component=Bridge >
                <IndexRoute component=Home />
                <Route path="user" component=T />
                <Route path="home" component=Home />
            </Route>
            <Route path="home" component=Home />
        </Router>
    );
  
 
  render(
   <Provider store=store>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

因此，当我使用 webpack 开发服务器时，我的路由器工作正常，但是当我将文件复制到 eclipse 项目的 web 内容时（这将为我设置所有内容并使用此 Url @987654321 使项目可部署和可访问@) 我在浏览器控制台中收到以下错误：

警告：[react-router] 位置“/test/index.html”不匹配任何路由

我还看了一些类似的帖子，例如：

similar posts

但我无法解决我的问题。有人可以帮忙吗？

【参考方案1】：

默认情况下，React Router 假定您的应用程序的位置位于您网站的根目录 (/)。当您将站点托管在 /test 目录中时，React Router 不知道这一点，除非您指定它。您需要做的是通过指定基本名称 (/test) 使用 useRouterHistory 历史增强器“增强”您的历史。

现在您正在使用 React Router 包含的 browserHistory，但您需要创建自己的知道基本名称的历史实例。

import  useRouterHistory, Router  from 'react-router'
// createHistory creates a browser history instance
import  createHistory  from 'history'

const history = useRouterHistory(createHistory)(
  basename: '/test'
)

class App extends React.Component 

  render() 
    return (
      <Router history=history>
        ...
      </Router>
    )
  

此外，您可以将自己的域用于 Heroku，但您必须是付费客户（或至少在您的帐户中附有信用卡）。

【讨论】：

非常感谢您的回答。我用你的回答对帖子进行了更新。如上所示，我更改了 index.js，但出现以下错误： Uncaught TypeError: createHistory is not a function 尽管我已通过 npm 安装历史记录

你有哪个版本的历史？应该是v3.2.1。如果您有 4 个，则需要切换到 2 或 3，因为 history v4 旨在与 React Router v4 一起使用。

另外，您不应该在 render 方法中创建历史记录，因为每次重新渲染 <Router> 时都会创建新的历史记录。我将更新我的示例代码以包含预期的布局。

谢谢。所以对于历史，我只是使用以下命令来安装历史：npm install --save history。无论如何要安装任何特定的历史版本吗？

npm install --save history@3.2.1 您可能需要先卸载当前版本，不确定 npm 如何处理安装较低版本号的版本。