路由 + 渲染 + 重定向 使用 react-router-dom

要使用react-router-dom进行路由、渲染和重定向，需要按照以下步骤进行操作：

1. 安装react-router-dom依赖：

   npm install react-router-dom
   

2. 在根组件中导入所需的模块：

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

3. 创建路由组件和需要渲染的组件：

   const Home = () => <h1>Home</h1>;
   const About = () => <h1>About</h1>;
   

4. 在根组件中定义路由和重定向规则：

   const App = () => {
     return (
       <Router>
         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
         <Redirect to="/" />
       </Router>
     );
   };
   

   这里使用了exact属性来确保只有在路径完全匹配时才渲染对应的组件。在最后一个Redirect组件中，可以将用户重定向到默认路径。

5. 在根组件中渲染App组件：

   ReactDOM.render(<App />, document.getElementById('root'));
   

完整的示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Redirect to="/" />
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

这个示例代码将创建一个简单的路由应用程序，当用户访问根路径时，将渲染Home组件，访问/about路径时，将渲染About组件，其他路径将重定向到根路径。