我正在尝试在SO上运行此代码段。
我正在使用CDN中的react-router-dom
。我可以匹配第一条路线,但是不知何故我无法更改为另一条路线。
是否可以使用摘要模拟这样的路由?相同的脚本适用于jsFiddle。
我做错什么了吗?
const { BrowserRouter, Route, Switch, Link } = window.ReactRouterDOM;
function App() {
return(
<BrowserRouter>
<Switch>
<Route exact path="/js" component={Home}/>
<Route exact path="/js/comp1" component={Component1}/>
</Switch>
</BrowserRouter>
);
}
function Home(props) {
console.log('Rendering Home...');
return(
<React.Fragment>
<div>I am home</div>
<div>props.location.pathname: {props.location.pathname}</div>
<div>props.match.path: {props.match.path}</div>
<Link to='/js/comp1'>Component1</Link>
</React.Fragment>
);
}
function Component1(props) {
console.log('Rendering Component1...');
return(
<React.Fragment>
<div>I am Component1</div>
<div>props.location.pathname: {props.location.pathname}</div>
<div>props.match.path: {props.match.path}</div>
<Link to='/js'>Home</Link>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.0.1/react-router-dom.min.js"></script>
<div id="root"/>