reactjs - 如何使用 reactJS 在不刷新网站的情况下更改 URL 和内容？

Question

我遇到了网站https://hashnode.com/。当我们单击任何主题时，它会更新 URL 和内容而不刷新站点。

我知道我们可以使用状态和道具更新内容而无需刷新。

如何同时更改网址？

图片

标签： reactjs

Answer 1

这就是 React Router 的用途。

Routes.js

import React from 'react';
import {BrowserRouter,Switch,Route, withRouter} from 'react-router-dom';
import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';

class Routes extends React.Component {
    render() {
         return(
             <Switch>
                 <Route exact path="/page-1" component={FirstPage} />
                 <Route exact path="/page-2" component={SecondPage} />
             </Switch>
         )
    }
}

App.js

import React from 'react';
import store from "./Store";
import { Provider } from 'react-redux';
import Routes from "./Routes";
import {BrowserRouter} from 'react-router-dom';

class App extends React.Component
{

    render()
    {
        return (

            <Provider store={store}>
                <BrowserRouter>
                    <Routes/>
                </BrowserRouter>
            </Provider>

        )
    }
}

export default App;