在单独的文件中反应路由器答案

【问题标题】：React Router in separate files在单独的文件中反应路由器
【发布时间】：2019-08-28 23:59:34
【问题描述】：

我正在尝试向我的 react 项目添加路由。我有三个独立的组件：

Window.js

import React, { Component } from 'react';
import SideBar from "../SideBar/SideBar";
import MainBody from "../MainBody/MainBody";
import  { BrowserRouter as Router} from "react-router-dom";

class Window extends Component{
    render() {
        return (
        <div>
        <Router>
                <SideBar />
                <MainBody />
        </Router>
        </div>
        );
    }
}

export default Window

SideBar.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import  { BrowserRouter as Link} from "react-router-dom";

class SideBar extends Component {
     render() {
         return(

            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
         );
     }
}

export default SideBar;

MainBody.js

import React, { Component } from 'react';
import Home from "./Home/Home";
import About from "./About/About";
import  { BrowserRouter as Route} from "react-router-dom";

class MainBody extends component {
     render() {
         return(
            <div>
            <Route exact path="/" component={Home}>
            <Route path="/about" component={About}>
            </div>
         );
     }
}

export default MainBody;

所以基本上，当我单击侧边栏中的一个链接时，我想转换到我的主体中的那个链接（主页和关于只显示它们的标题）。但是，当我运行它时，我的 Window、MainBody 和 SideBar 组件可以工作，但我的 Home 和 About 组件不会显示。我已将路由器组件正确导入到每个组件文件中。如果我将 MainBody 中的 Routes 放入 Window 组件中，它们会显示出来（但不确定路由器链接是否可以使用它）。任何建议都会有所帮助！

【问题讨论】：

您能否编辑代码示例，让我们知道哪个文件是什么。添加出口和进口。 Meybe 将代码框与不起作用的示例链接起来。
嘿，我已经更新了代码 sn-ps 以包含文件名、导出和导入！

标签： reactjs user-interface react-router material-ui react-router-dom

【解决方案1】：

在那个 sn-ps 中几乎没有错别字，不知道是不是在重写时打错了，或者你的代码库中有错字，但要小心它们（组件而不是组件，错误编写的渲染函数返回多个元素等）。

import  { BrowserRouter as Link} from "react-router-dom";

这些导入也是错误的，你必须导入链接而不是链接。您只是将 import BrowserRouter 重命名为 Link。

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

Route 也一样。

这里是示例 codesanbox 。让我知道这是否是您想要的。

【讨论】：