React中如何在不同路由使用组件？代码报错求助

嘿，我看你在配置React路由时遇到问题了，咱们先拆解下你代码里的问题，再给出修复方案：

你的代码里的核心问题 #

1. <Router>的子元素不符合React要求：React组件的根节点必须是单一元素，你现在在<Router>里直接放了<App>和一个<Route>，这会直接触发报错。
2. 路由没有排他性匹配：你没用到<Switch>（v5）或<Routes>（v6），这会导致多个匹配的路由同时渲染，完全不符合你“不同路由对应不同组件”的预期。
3. 路由结构混乱：部分路由塞在<App>里，部分又放在<App>外面，这种分散的写法会让渲染逻辑变得混乱。

修复方案（分React Router版本） #

如果你用的是React Router v5（你代码里用了component属性，大概率是v5） #

方案1：所有路由统一用<Switch>包裹

这是最简洁的写法，适合不需要在App里嵌套布局的场景：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import App from './App';
import Login from './Login';
import Registro from './Registro';
import Registrar from './Registrar';
import Home from './Home';

ReactDOM.render(
  <Router>
    {/* Switch会只渲染第一个匹配的路由，实现排他性 */}
    <Switch>
      <Route exact path="/login" component={Login} />
      <Route exact path='/registro' component={Registro}/>
      <Route exact path='/registrar' component={Registrar}/>
      <Route exact path="/home" component={Home} />
      {/* 把App作为默认路由，匹配所有未定义的路径 */}
      <Route path="/" component={App} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

方案2：把App作为布局组件，嵌套路由

如果你的App里有导航栏、全局样式这类需要共享的内容，希望其他路由组件渲染在App内部，可以这么写：

主入口文件

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import App from './App';
import Login from './Login';
import Registro from './Registro';
import Registrar from './Registrar';
import Home from './Home';

ReactDOM.render(
  <Router>
    <Switch>
      {/* 登录页单独出去，不需要App的布局 */}
      <Route exact path="/login" component={Login} />
      {/* 其他路由嵌套在App里 */}
      <Route path="/" render={() => (
        <App>
          <Switch>
            <Route exact path='/registro' component={Registro}/>
            <Route exact path='/registrar' component={Registrar}/>
            <Route exact path="/home" component={Home} />
          </Switch>
        </App>
      )} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

App组件代码（补全你没写完的部分）

class App extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div className="app-wrapper">
        {/* 这里放你的全局导航、页脚等 */}
        <header>我的网站导航</header>
        {/* 子路由组件会渲染在这里 */}
        <main>{children}</main>
      </div>
    );
  }
}

如果你用的是React Router v6（最新版本） #

v6里做了不少改动，比如移除了component属性，改用element，用<Routes>代替<Switch>，修复代码如下：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './App';
import Login from './Login';
import Registro from './Registro';
import Registrar from './Registrar';
import Home from './Home';

ReactDOM.render(
  <Router>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path='/registro' element={<Registro />}/>
      <Route path='/registrar' element={<Registrar />}/>
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<App />} />
    </Routes>
  </Router>,
  document.getElementById('root')
);

额外提醒 #

• 先确认你安装的react-router-dom版本：v5用npm install react-router-dom，v6用npm install react-router-dom@6
• v6里不再需要exact属性，默认就是精确匹配，除非你用*通配符做模糊匹配

内容的提问来源于stack exchange，提问作者marcelo.delta