React Router не работает для моих компонентов

Question

Я пытаюсь использовать реагирующий маршрутизатор v5. Ниже приведен файл App.js, который я пытаюсь использовать BrowserRouter.

---

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

import Navbar from './components/Navbar';
import Home from './components/home/Home';
import Projects from './components/projects/Projects';

<Link to="/projects">Projects</Link>;


class App extends Component{
    render(){i
        return (
            <Router>
                <div className="App">
                    <Navbar />
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route exact path="/projects" component={Projects} />
                    </Switch>
                </div>
            </Router>
        )
    }
};
export default App;

---

Когда я добавляю "/ projects" к "localhost: 3000", я бы хотел, чтобы страница проектов отображалась, но я попадаю на пустую страницу с "/home/aaron/projects/website/src/index.html ». Если кто-то может знать, почему это, пожалуйста, сообщите мне. Я прочитал много уроков, и мне кажется, что я правильно выполняю все шаги.

Answer 1

В вашем коде есть синтаксическая ошибка. Ниже код будет работать для вас.

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

import Navbar from './components/Navbar';
import Home from './components/home/Home';
import Projects from './components/projects/Projects';


class App extends Component{
    render(){
        return (
            <Router>
                <div className="App">
                    <Navbar />
                    <Link to="/projects">Projects</Link>
                    <Switch>
                        <Route exact path="/projects" component={Projects} />
                        <Route exact path="/" component={Home} />
                    </Switch>
                </div>
            </Router>
        )
    }
};
export default App;

https://codesandbox.io/s/q8qrk6rmo4

Вот ссылка для кодов и ящиков, там она работает нормально.

Надеюсь, это поможет вам.