更新“URL”但不加载路径

Question

导航栏路线不起作用。

我有一个navbar component，它充当菜单栏。这个navbar component 路由到About component。我还有一个Route.js，我在其中为应用程序的其余部分实现了路由。 Route.js 是我正在加载 Navbar component 的位置。

它正在更新URL，但不加载路径。

Complete code can be found here:

Navbar component

import React, { Fragment } from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
} from "react-router-dom";

import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';

import About from '../pages/About';

const useStyles = makeStyles({
    hr: {
        width: '0.5px',
        height: '25px',
        backgroundColor: '#fff',
        margin: '0px 10px',
    },
    a: {
        color: '#ffffff',
        cursor: 'pointer',
        textDecoration: 'none',
    },
});

const Navbar = () => {
    const classes = useStyles();
    return (
        <Fragment>
            <Router>
                <AppBar position="static" width='100%'>
                    <Toolbar>
                        <Typography variant="h6" >
                            <Link to='/' className={classes.a}> Todo List Application </Link>
                        </Typography>
                        <Divider orientation="vertical" className={classes.hr} />
                        <Link to='../pages/About.js' className={classes.a}>
                            About
                        </Link>
                    </Toolbar>
                </AppBar>
                <Route path="/about.js" component={About}>
                    <About />
                </Route>
            </Router>
        </Fragment>
    );
}

export default Navbar;

这个AppRouter被加载到App.js

Answer 1

我克隆了你的项目并运行了它。

更新了 Navbar.js，（移除了 AppBar 中的 Router 封装，并移除了 Navbar 组件中的 Route 声明）

import React, { Fragment } from 'react'
import { BrowserRouter as Router, Route, Link} from "react-router-dom";

import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';

import About from '../pages/About';

const useStyles = makeStyles({
    hr: {
        width: '0.5px',
        height: '25px',
        backgroundColor: '#fff',
        margin: '0px 10px',
    },
    a: {
        color: '#ffffff',
        cursor: 'pointer',
        textDecoration: 'none',
    },
});

const Navbar = () => {
    const classes = useStyles();
    return (
        <Fragment>

                <AppBar position="static" width='100%'>
                    <Toolbar>
                        <Typography variant="h6" >
                            <Link to='/' className={classes.a}> Todo List Application </Link>
                        </Typography>
                        <Divider orientation="vertical" className={classes.hr} />
                        <Link to='/about' className={classes.a}>
                            About
                        </Link>
                    </Toolbar>
                </AppBar>

        </Fragment>
    );
}

export default Navbar;

更新了 src/routes/index.js（在此处添加了 about Route 并使用 Switch 封闭了 Routes）

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import TrelloBoard from "../components/TrelloBoard";
import Home from "../components/Home";
import Navbar from "../components/navbar/Navbar";
import About from "../components/pages/About";

const AppRouter = () => {
    return (

        <Router>
            <div>
                <Navbar></Navbar>
                <Switch>
                    <Route path="/about" component={About} />
                    <Route path="/:boardID" component={TrelloBoard} />
                    <Route path="/" exact component={Home} />
                </Switch>
            </div>
        </Router>
    );
};

export default AppRouter;

我认为上述更改按您的预期工作。

Answer 2

您的<Link> 组件需要一个参数to，它是您路由器中定义<Route> 的定义网址。

在您的示例中，您似乎正在尝试使用相对路径访问 js 文件，但这不是 react-router-dom 的工作方式。

尝试替换为：

<Link to='/about' className={classes.a}>

并确保您定义了相同的路线：

<Switch>
    <Route exact path="/" component={Home}>
    <Route path="/about">
        <About />
    </Route>
</Switch>

<Switch> 浏览其所有子级 元素并渲染其路径的第一个元素 匹配当前 URL。随时使用 你有多条路线，但你只想要一条 其中一次渲染

您可以在 react router basic documentation 上查看完整的工作示例，它运行此 sandbox。