Javascript 你能在单独的JS文件中分离链接和路由吗？

我有一个Nav.js文件和一个App.js文件

Nav.js-

import { Link, Router } from 'react-router-dom'
render() {
    return (
        <Router>
            <ul className="nav-list">
                <li><Link to="/">Home<Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
        </Router>
    )
}

从'react Router dom'导入{Link，Router}
render（）{
返回(

家
关于
接触

)
}

App.js-

import Nav from './nav.js'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
render() {
    return (
        <Nav />
        <Router>
            <Switch>
                <Route exact path="/" />
                <Route exact path="/about" />
                <Route exact path="/contact" />
            </Switch>
        </Router>
    )
}

从“./Nav.js”导入导航
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
render（）{
返回(
)
}

---

出于某种原因，这不起作用，但我觉得它应该基于react路由器dom文档。React路由器看起来应该很简单，但我在学习过程中遇到了困难。我真的不能让事情按我希望的方式进行。有没有人知道如何以这种方式设置它，或者有一个很好的参考来为我澄清一些事情

在由create react app创建的应用程序中（我正在使用reactstrap，但您可以删除它，不使用它）：

index.js：

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./components/Navigation”导入导航；//顶部（固定）导航
从“./components/Footer”导入页脚；//底部（固定）页脚
从“./components/Home”导入Home；
从“./components/One”导入一个；
从“./components/Two”导入两个；
...
ReactDOM.render(
，document.querySelector（“#root”）；

Navigation.js：

从“React”导入React；
从“reactstrap”导入{Collapse、Navbar、NavbarToggler、NavbarBrand、Nav、NavItem、NavLink}；
从'react router dom'导入{Link}；
类导航扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
伊索彭：错
};
}
切换（）{
这是我的国家({
isOpen:！this.state.isOpen
});
}
render（）{
返回(
{this.props.loginEmail&&
图书类别
}
如何使用这个网站
关于

);
}

您可以在两个文件中解决此问题 但是在相同的BrowserRouter标签中您在给定的示例中遗漏了这一点。应该是

import Nav from './nav.js'
import { BrowserRouter, Route, Switch } from "react-router-dom"
render() {
    return (
        <BrowserRouter>
            <Nav />
            <Switch>
                <Route exact path="/" />
                <Route exact path="/about" />
                <Route exact path="/contact" />
            </Switch>
        </BrowserRouter>
    )
}

从“./Nav.js”导入导航
从“react router dom”导入{BrowserRouter，Route，Switch}
render（）{
返回(
)
}

希望这对你有帮助

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';

class Navigation extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

render() {
    return (
      <div>
        <Navbar color="faded" light expand="md">
          <NavbarBrand tag={Link} to="/">
            <img src="/assets/images/book_lover.png" alt="book-lover!" />
          </NavbarBrand>

            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink tag={Link} to="#">
                </NavLink>
              </NavItem>
            </Nav>

        <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              {this.props.loginEmail && <NavItem>
                <NavLink tag={Link} to="/cats">Book-Categories</NavLink>
              </NavItem>}
              <NavItem>
                <NavLink tag={Link} to="/howto">How-To-Use-This-Site</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} to="/about">About</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <hr />
      </div>
    );
  }

import Nav from './nav.js'
import { BrowserRouter, Route, Switch } from "react-router-dom"
render() {
    return (
        <BrowserRouter>
            <Nav />
            <Switch>
                <Route exact path="/" />
                <Route exact path="/about" />
                <Route exact path="/contact" />
            </Switch>
        </BrowserRouter>
    )
}