使用 window.history 更改 URL 而不重新渲染？

Question

我想要的是（有3个按钮）

1. 用户点击任意一个按钮，URL 的第一个字母必须改为大写
2. 网址看起来像，“path/country= india, usa, australia”
3. 预期网址，“path/country= India、Usa、Australia”

class App extends Component {
    constructor(props) {
        super(props);
        this.state = ['india','usa','australia']
    }

    let onTabChange = () => {
        window.history.replaceState(null,null,`${this.state.country.join(',')}`)
    }
    render() {
        return (
            <Switch>
                <Route path={`/India`} component={India} />
                <Route path={`/Usa`} component={Usa} />
                <Route path={`/Australia`} component={Australia} />
            </Switch>
        )}
    }
}