Я пытался использовать React Router для настройки страницы со ссылкой на нее, которая будет отображать новую страницу, когда пользователь нажимает на ссылку.Я попробовал упрощенную версию примера в документации React Router , но она отображает дополнительную страницу в нижней части существующей страницы, когда пользователь щелкает ссылку, а не отображает новую страницу.
Я нашел несколько вопросов StackOverflow ( это , это , это ), которые кажутся похожими, но я не нашел там решения- похоже, что некоторые люди заставили его работать, но они не публикуют полный код, и я не смог правильно угадать, что они сделали.Пара мест, кажется, предполагает, что <Route> должен быть в другом файле, чтобы новая страница отображалась.Исходя из этого, вот моя последняя попытка:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import About from './About.js';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/about" component={About} />
<Route exact path="/" component={App} />
</Switch>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<div>
<h1>This is the main page</h1>
<ul>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
</div>
</Router>
);
}
}
export default App;
About.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import './App.css';
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
export default About;
Если я нажму на ссылку, в строке URL-адреса отобразится сообщение localhost: 3000 / about.Но страница не меняется.Если я обновляю браузер, он снова отображает «О программе» на своей странице, что я и хочу сделать, когда нажимаю на ссылку.Это самое близкое, что я получил, но как мне заставить его делать правильные вещи, не нуждаясь в обновлении?Или что-то еще я делаю совершенно неправильно?
Реактивная версия router-dom - 4.3.1.Я использую Chrome.