路由不适用于 react-router-dom答案

【问题标题】：Routing not working with react-router-dom路由不适用于 react-router-dom
【发布时间】：2021-05-18 07:41:16
【问题描述】：

我正在处理我朋友的一个半成品 React 项目。我正在尝试使用 react-router-dom 路由我的 react-app。 <switch> 中的组件不工作。这是我的

App.js

import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';

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


function App() {
  return(
    <Router>
        <div className="App">
            <Header />
            <Switch>
                <Route path="/" exact component={Main} />
                <Route path="/process" component={ProcessInput} />
            </Switch>
            <Footer />
        </div>  
    </Router>
  );
}

export default App;

Main.js

import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';

class Main extends React.Component {
    render() {
        return (
            <div>
               <main>
                  <Slider />
                  <Card1 />
                  <Card2 />
                  <Prompt />
               </main>  
            </div>
        )
    }
}

export default Main;

<Switch> 之外的 <Header /> 和 <Footer /> 无论如何都按预期显示。但是，我希望将 Main 组件作为根组件（启动器）加载。

控制台上没有错误。

请帮助我了解我做错了什么。在此先感谢:)

【问题讨论】：

从共享的 sn-p 中，我看不出为什么 Main 不会被 Switch 匹配和呈现。没有来自Main 的渲染吗？您是否尝试过从Main 渲染一些简单的东西，比如纯文本，看看它是 that 组件还是它外部的东西？ ProcessInput 组件是否在“/process”上呈现？如果可能的话，您能否尝试创建一个 running 代码框以准确重现您的问题并将其链接到您的问题中？
不，绝对没有任何来自 Main 的渲染。我在 ProcessInput.js 中尝试了一个简单的
并尝试将自己路由到 /process。它也没有渲染。
我也发现您发布的代码没有任何问题。
是的，我做到了。还是不行！
您是否通过应用内的链接/等进行导航？手动 URL 输入是否有效？您正在做什么来产生问题（即复制步骤）？请尝试创建一个代码框来重现我们可能会检查和实时调试的问题。

标签： javascript reactjs react-router-dom

【解决方案1】：

<Route path="/" exact>
<Main/> 
</Route>
<Route path="/process"><ProcessInput/>
</Route>

这是旧方法。你可以试试这个

【讨论】：

我也试了一下。
不，不是！

并尝试将自己路由到 /process。它也没有渲染。