Обновление `URL`, но не загрузка пути - PullRequest
Новая
       46

Обновление `URL`, но не загрузка пути

1 голос
/ 03 ноября 2019

Маршрут Navbar не работает.

У меня есть navbar component, который действует как строка меню. Это navbar component маршруты к About component. У меня также есть Route.js, где у меня есть реализация маршрутизации для остальной части приложения. Route.js - это то, куда я загружаю Navbar component.

Он обновляет URL, но не загружает путь.

Полный код можно найти здесь:

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

Ответы [ 2 ]

2 голосов
/ 03 ноября 2019

Вашему компоненту <Link> нужен аргумент to, который является определением URL для определения <Route> в вашем маршрутизаторе.

В вашем примере он выглядит так, как будто вы пытаетесь получить доступ к файлу js, используя относительный путь, но это не так, как работает response-router-dom.

Попробуйте заменить на: 

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

И убедитесь, что у вас определен тот же маршрут: 

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

A <Switch> просматривает все дочерние элементы и отображает первый, чей путь соответствует текущему URL. Используйте в любое время, когда у вас есть несколько маршрутов, но вы хотите, чтобы только один из них отображался за один раз

Вы можете увидеть полный рабочий пример на реагирующей маршрутизаторе базовой документации , котораязапустите эту песочницу .

1 голос
/ 03 ноября 2019

Я клонировал ваш проект и запустил его.

Обновлен Navbar.js, (Удален маршрутизатор, включенный в AppBar, и удалено объявление Route из компонента Navbar) 

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;

updated src/routes/index.js (добавил здесь о маршруте и вложил маршруты с помощью коммутатора) 

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;

Я думаю, что вышеописанные изменения работают, как вы ожидали.

...