React路由不匹配查询字符串

Question

我想反应路由匹配的localhost:8945/?type=admin地址。我尝试了下面的代码，但它总是渲染Home组件。

<BrowserRouter>
<Switch>
<Route exact path = "/?type=admin">        **this is not working**
<Admin />
</Route>
<Route exact path = "/">
<Home/>
</Route>
</Switch>
</BrowserRouter>

当我在url栏中输入localhost:8945/?type=admin时，它应该呈现Admin组件(不需要任何服务器api)。

Answer 1

解决了!

class App extends React.Component{
constructor() {
super();
this.state = {
type:''
};
}
componentDidMount() {
this.setUrlParams();
}
setUrlParams(){
const urlParams = new URLSearchParams(window.location.search);
this.setState({type : urlParams.get('type')})
}

render(){
return {
<div>
{  this.state.type=== 'admin'
? <Admin/>
: <Home/>
}
</div>
}
}
}

Answer 2

嗨，看看这个查询参数