<Route> 标签不渲染任何内容答案

【问题标题】：Nothing renders with <Route> tag<Route> 标签不渲染任何内容
【发布时间】：2022-01-08 22:08:03
【问题描述】：

我是使用 react 编码的新手，但我第一次尝试制作网站。当我尝试使用react-router-dom 创建“新页面”时，每次添加<Route path='/side2' component={Side2} /> 行时，我的组件都会消失，没有警告或错误。这是我的代码：（App.js）

import Selector from './components/Selector';
import Side2 from './components/Side2';
import {BrowserRouter as Router} from 'react-router-dom';
import {Route} from 'react-router-dom'


function App() {
  return (
    <Router>
      <div className="App">
        <header>Mametphoto</header>
        <Selector />
        <Side2 />
        <Route path="/side2" component={Side2} />
      </div>
    </Router>
  );
}

export default App;

为什么会发生这种情况，我该如何解决？（当我删除 <Route> 标记时，一切正常。这是我的其余代码：（Selector.js）

    return (
        <span>
          <div className="half1">
            <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
            <h2>Side 1</h2>
          </div>
          <div className="half2">
            <a href="/side2">
              <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
            </a>
            <h2>Side 2</h2>
          </div>
        </span>
    )
}

export default Selector

(Side2.js)

    return (
        <div>
            <a href="/"><button>BACK</button></a>
        </div>
    )
}

export default Side2

【问题讨论】：

检查您的 package.json 文件并报告您正在使用的 react-router-dom 版本。它们最近从 v5 更改为 v6，语法不同，这很可能是您的问题。
为什么这被标记为 react-native ？，react 和 react native 中的路由是不同的

标签： reactjs react-router

【解决方案1】：

看起来您需要用Routes 组件包装Route 组件，并修复用于渲染Side2 组件的道具。 react-router-dom v6 不再使用 component 或 render 和 children 属性函数，它们已被删除，取而代之的是一个带有 ReactElement 或 JSX 的 element 属性。

<Routes>
  <Route path="/side2" element={<Side2 />} />
</Routes>

您还应该使用 Link 组件而不是原始锚 (<a />) 标签进行导航。

return (
  <span>
    <div className="half1">
      <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
      <h2>Side 1</h2>
    </div>
    <div className="half2">
      <Link to="/side2">
        <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
      </Link>
      <h2>Side 2</h2>
    </div>
  </span>
);

【讨论】：

谢谢，一切正常，一切正常：)

【解决方案2】：

试试这个

App.js

//在app.js中添加开关

import Selector from './components/Selector';
import Side2 from './components/Side2';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <header>Mametphoto</header>
        <Selector />
        <Side2 />
        <Switch>
            <Route exact path="/side2" component={Side2} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

选择器.js

//用链接标签替换标签

import { Link } from "react-router-dom";
...
    return (
        <span>
          <div className="half1">
            <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
            <h2>Side 1</h2>
          </div>
          <div className="half2">
            <Link to="/side2">
                <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
                <h2>Side 2</h2>
            </Link> 
            
          </div>
        </span>
    )
}

export default Selector

希望这能解决您的问题。请让我们知道它是否有效。

【讨论】：

从 react-router-dom 添加给了我这个错误：export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
我明白了。可能是因为版本问题。我的react-router-dom 是 5.2.0。如果您有版本 6，那么您需要使用 Routes 而不是 Switch。请关注此link 了解更多信息。

【解决方案3】：

您可能使用的是 React Router Dom v6，因此您应该使用以下 -

// app.js

import Selector from './components/Selector';
import Side2 from './components/Side2';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <div className="App">
            <header>Mametphoto</header>
            <Selector />
        </div>
        <Route path="/side2" element={<Side2 />} />
      </Routes>
    </Router>
  );
}

export default App;

【讨论】：

仍然没有任何效果。我的屏幕仍然没有组件