在React路由器Dom中设置不属于App.js的独立路由的正确方法是什么？

在React路由器Dom中设置不属于App.js的独立路由的正确方法是使用React Router中的BrowserRouter组件和Route组件。

首先，要确保已经安装并引入了React Router库。

然后，在根组件（通常是App.js）中，使用BrowserRouter组件包裹整个应用程序的路由部分，类似于下面的代码：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 这里放置其他组件和路由 */}
    </BrowserRouter>
  );
}

export default App;

接下来，在需要设置独立路由的组件中，使用Route组件进行路由的配置。例如，假设我们要设置一个独立路由的组件为About.js，可以按照以下方式进行配置：

import { Route } from 'react-router-dom';

function About() {
  return (
    <div>
      {/* About组件的内容 */}
    </div>
  );
}

export default About;

然后，在根组件中，可以在BrowserRouter组件内部通过使用Route组件进行独立路由的设置，如下所示：

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 其他组件和路由 */}
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;

在上述示例中，我们通过在Route组件的path属性中指定了路由路径"/about"，并使用component属性指定了About组件，这样当用户访问"/about"时，React路由器会渲染About组件的内容。

需要注意的是，还可以使用其他属性来对路由进行更细粒度的配置，例如exact属性表示精确匹配路由路径，可以避免多个路由同时匹配的情况。

参考腾讯云相关产品：React Native、Serverless云函数、容器服务-Kubernetes、云数据库MongoDB

产品介绍链接地址：