如何配置React-Router？

要配置React Router，需要按照以下步骤进行操作：

1：安装React Router依赖：在项目根目录下运行以下命令，使用npm或者yarn安装React Router相关的包。

npm install react-router-dom

或

yarn add react-router-dom

2：创建路由组件：在你的应用程序中创建路由组件，用于定义不同URL路径下的页面组件。可以使用BrowserRouter或HashRouter作为根组件，用来包裹其他组件。


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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function NotFound() {
  return <h1>404 Not Found</h1>;
}

在上述例子中，App组件是根组件，Switch组件用于包裹Route组件，根据URL路径匹配对应的页面组件进行渲染。

3：导航链接和路由参数：在需要导航的地方使用Link组件来创建链接，并使用exact属性确保只有在路径完全匹配时才进行渲染。使用Route组件的path属性来定义URL路径，并可以使用component属性指定要渲染的组件。


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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

4：嵌套路由：React Router还支持嵌套路由，可以在组件内部定义更具体的子路由。


function About() {
  return (
    <div>
      <h1>About Page</h1>
      <ul>
        <li>
          <Link to="/about/company">Company</Link>
        </li>
        <li>
          <Link to="/about/team">Team</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/about/company" component={Company} />
        <Route path="/about/team" component={Team} />
      </Switch>
    </div>
  );
}

function Company() {
  return <h2>Company Information</h2>;
}

function Team() {
  return <h2>Our Team</h2>;
}

在上述例子中，About组件内部定义了两个子路由/about/company和/about/team，根据路径匹配对应的子组件进行渲染。