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

Question

我正在尝试将路由添加到我的 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;

所以基本上，当我在 SideBar 中单击我的 link 之一时，我想转换到 Main Body 中的那个 link（主页和关于只是显示他们的标题）。但是，当我运行这个时，我的 Window、MainBody 和 SideBar 组件可以工作，但我的主页和关于组件不会显示。我已经正确地将路由器组件导入到每个组件文件中。如果我将来自 MainBody 的路由放入 Window 组件中，它们就会显示出来（但不确定路由器 link 是否与它一起工作）。任何建议都会有所帮助！

Answer 1

该片段中几乎没有拼写错误，不知道它是在重写时出现的还是您的代码库中有它，但要小心它们（组件而不是组件，错误地编写了返回多个元素的渲染函数等）。

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

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

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

路线也一样。

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

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

React Router in separate files

user-interface

reactjs

react-router

material-ui

react-router-dom